Свой сайт бесплатно?
7 шагов, чтобы создать сайт
Самостоятельное и бесплатное создание сайтов в сети
Шаг 5. Создаем HTML таблицы
В сайтостроении таблицы используются как для представления данных, так и для верстки.
Пример самой обычной таблицы:
<body>
<table border="1" height="100" width="614">
<tr>
<td>Первая ячейка первого ряда</td>
<td>Вторая ячейка первого ряда</td>
<td>Третья ячейка первого ряда</td>
</tr>
<tr>
<td>Первая ячейка второго ряда</td>
<td>Вторая ячейка второго ряда</td>
<td>Третья ячейка второго ряда</td>
</tr>
</table>
</body>
</html>
|
Результат:
Первая ячейка первого ряда |
Вторая ячейка первого ряда |
Третья ячейка первого ряда |
Первая ячейка второго ряда |
Вторая ячейка второго ряда |
Третья ячейка второго ряда |
Теги, атрибуты и их значения
- <table> </table> создают таблицу.
- Теги <tr> </tr> определяют табличный ряд, расположенный по горизонтали.
- <td> </td> определяют ячейку таблицы.
- Параметр border="1" определяет табличную рамку, в данном случае равную 1px.
- Атрибут width="" – ширина таблицы.
- Атрибут height="" определяет высоту таблицы в пикселях или в процентах.
Отменим рамку и окрасим ячейки в различные цвета:
<body>
<table cellpadding="8" cellspacing="10" height="120" style="color:#ffffee">
<tr>
<td style="background-color:#cc0033">Первая ячейка первого ряда</td>
<td style="background-color:#ccff00">Вторая ячейка первого ряда</td>
<td style="background-color:#66cc66">Третья ячейка первого ряда</td>
</tr>
<tr>
<td style="background-color:#66ccff">Первая ячейка второго ряда</td>
<td style="background-color:#ff9933">Вторая ячейка второго ряда</td>
<td style="background-color:#3366ff">Третья ячейка второго ряда</td>
</tr>
</table>
</body>
</html>
|
Результат:
Первая ячейка первого ряда |
Вторая ячейка первого ряда |
Третья ячейка первого ряда |
Первая ячейка второго ряда |
Вторая ячейка второго ряда |
Третья ячейка второго ряда |
HTML атрибуты и их значения
- Атрибут cellpadding="" определяет поля между границей ячейки и ее содержимым.
- Атрибут cellspacing="" определяет пространство между ячейками таблицы.
- Атрибут style="" – линейное CSS включение.
- Параметр color: определяет цвет текста.
- Параметр background-color: определяет цвет фона.
Источники: HTML таблицы | Подробно о таблицах | HTML цвет | HTML цвет текста | CSS
Дата публикации: Апрель 2010 | Обновление: Ноябрь 2018
Шаг 4. HTML изображение
Шаг 5. HTML таблицы
Шаг 6. HTML верстка