Свой сайт бесплатно?

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>

Результат:

Первая ячейка первого ряда Вторая ячейка первого ряда Третья ячейка первого ряда
Первая ячейка второго ряда Вторая ячейка второго ряда Третья ячейка второго ряда

Теги, атрибуты и их значения

Отменим рамку и окрасим ячейки в различные цвета:

<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 атрибуты и их значения

Источники: HTML таблицы | Подробно о таблицах | HTML цвет | HTML цвет текста | CSS

Автор проекта - Вася Митин | Дата публикации: Апрель 2010 | Обновление: Ноябрь 2018

Шаг 4. HTML изображение   Шаг 5. HTML таблицы   Шаг 6. HTML верстка