Вернуться на главную

Работа с таблицами в HTML

 Здесь могла быть ваша реклама:)
Базовое устройство документа
Работа с текстом в HTML
Работа со списками в HTML
**Работа с таблицами в HTML**
Изображения в HTML
Ссылки в HTML
iframe
Формы в HTML
Видео в HTML
Тестовая страница

Базовое устройство таблиц

Для создания таблиц используется дескриптор <table> </table>.
Чтобы добавить ряд в таблицу ряд используется дескриптор <tr> </tr>

Для добавления ячейки с заголовком в ряд используется дескриптор <th> </th>

Для добавления обычной ячейки в ряд используется дескриптор <td> </td>

Пример таблицы 3х3

Код:

<table>
    <tr>
        <th>Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
    </tr>
    <tr>
        <td>Обычная ячейка 1</td>
        <td>Обычная ячейка 2</td>
        <td>Обычная ячейка 3</td>
    </tr>
    <tr>
        <td>Обычная ячейка 4</td>
        <td>Обычная ячейка 5</td>
        <td>Обычная ячейка 6</td>
    </tr>
</table>

Внешний вид таблицы описаной выше

Заголовок 1 Заголовок 2 Заголовок 3
Обычная ячейка 1 Обычная ячейка 2 Обычная ячейка 3
Обычная ячейка 4 Обычная ячейка 5 Обычная ячейка 6

Атрибуты применяемые в таблицах
Атрибут Что изменяет Допустимые значения Применение
align выравнивание по горизонтали Допустимые значения left, right, center, justify Как атрибут в table, th, td, tr
valign выравнивание по вертикали Допустимые значения top(сверху), middle(по середине), bottom (снизу) Как атрибут в table, th, td, tr
width ширина Измеряется в пикселях (число в кавычках) или в процентах от ширины таблицы (после числа - знак%) Как атрибут в table, th, td
height высота Измеряется в пикселях Как атрибут в table, tr
border толщина границ Измеряется в пикселях Как атрибут в table
cellspacing отступы между ячейками Измеряется в пикселях Как атрибут в table
cellpadding отступы внутри ячеек Измеряется в пикселях Как атрибут в table
bgcolor фоновый цвет в формате HEX после# три шестнадцатиричных числа (например bgcolor=#bae3b8) Как атрибут в table, th, td, tr
background фоновый рисунок в кавычках путь к файлу, например background="cat.png" Как атрибут в table, th, td, tr

Объединение ячеек

Для обединения ячеек в ряд, атрибуту colspan присваиваем количество ячеек в ширину например colspan="2" Тогда ячеек в ряду будет здесь
2+1=3
Для обединения ячеек в колонку, атрибуту rowspan присваиваем количество ячеек в высоту например rawspan="2" Можно объединять ячейки одновременно и по рядам и по колонкам, тогда мы сможем объединить масив ячеек, например 2х2
Обычная ячейка 4 Обычная ячейка 5