- •«Основы работы с html»
- •Примеры
- •Дополнительные примеры
- •Заголовки в таблице
- •Пустые ячейки
- •Заглавие таблицы
- •Ячейки таблицы, которые охватывают более одной строки/столбца
- •Теги внутри таблицы
- •Отступ от рамки до содержимого ячейки
- •Расстояние между ячейками
- •Использование в таблице фонового цвета или фонового изображения
- •Фоновый цвет или фоновое изображение в ячейке таблицы
- •Выравнивание содержимого в ячейках таблицы
- •Атрибут frame
- •Теги таблиц
Отступ от рамки до содержимого ячейки
<html>
<body>
<h4>Без отступа:</h4>
<table border="1">
<tr>
<td>Первая </td>
<td>Строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>Строка</td>
</tr>
</table>
<h4>С отступом (cellpadding) :</h4>
<table border="1"
cellpadding="10">
<tr>
<td>Первая</td>
<td>Строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>Строка</td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Расстояние между ячейками
<html>
<body>
<h4>Расстояние между ячейками не задано:</h4>
<table border="1">
<tr>
<td>Первая </td>
<td>Строка </td>
</tr>
<tr>
<td>Вторая </td>
<td>Строка </td>
</tr>
</table>
<h4>Расстояние между ячейками (cellspacing) задано:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>Первая </td>
<td>Строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>Строка </td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Использование в таблице фонового цвета или фонового изображения
<html>
<body>
<h4>Фоновый цвет (bgcolor):</h4>
<table border="1"
bgcolor="red">
<tr>
<td>Первая </td>
<td>Строка </td>
</tr>
<tr>
<td>Вторая </td>
<td>Строка </td>
</tr>
</table>
<h4>Фоновое изображение (background):</h4>
<table border="1"
background="bg.jpg">
<tr>
<td>Первая</td>
<td>Строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>Строка </td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Фоновый цвет или фоновое изображение в ячейке таблицы
<html>
<body>
<h4>Ячейки с фоном:</h4>
<table border="1">
<tr>
<td bgcolor="red">Первая</td>
<td>Строка</td>
</tr>
<tr>
<td background="bg.jpg"> Вторая</td>
<td>Строка</td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Выравнивание содержимого в ячейках таблицы
<html>
<body>
<table width="360" border="1">
<tr>
<th align="left">Опубликовано курсов</th>
<th align="center">2004</th>
<th align="center">2005</th>
</tr>
<tr>
<td align="left">Базы данных</td>
<td align="center">2</td>
<td align="center">3</td>
</tr>
<tr>
<td align="left">Программирование</td>
<td align="center">4</td>
<td align="center">5</td>
</tr>
<tr>
<td align="left">Интернет-технологии</td>
<td align="right">2</td>
<td align="right">3</td>
</tr>
<tr>
<th align="left">всего</th>
<th align="right">8</th>
<th align="right">11</th>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода
Атрибут frame
<html>
<body>
<p>
Если никакие границы кадра таблицы в этих примерах не видны,
то используемый браузер слишком старый, или не поддерживает их.
</p>
<h4> frame="border":</h4>
<table frame="border">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>строка</td>
</tr>
</table>
<h4> frame="box":</h4>
<table frame="box">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая </td>
<td>строка</td>
</tr>
</table>
<h4>frame="void":</h4>
<table frame="void">
<tr>
<td>Первая </td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>frame="above":</h4>
<table frame="above">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>frame="below":</h4>
<table frame="below">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
<h4>frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>Первая</td>
<td>строка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строка</td>
</tr>
</table>
</body>
</html>
Пример выполнения данного HTML-кода