Как известно, язык HTML – мощный инструмент для разметки страниц. Одним из ключевых элементов в правильном построении информации на странице являются таблицы. В данном случае подразумевается не привычная нам таблица с несколькими строками и столбцами, используемая в привычной жизни для структурирования данных. Говоря о таблицах в HTML необходимо понимать, что таблицы необходимы для разделения страницы на блоки для более удобной подачи информации.
Важным тегом для построения таблиц является тег <td>, находящийся в контейнере <tr>. Задача тега <td> – формирование ячейки таблицы. В упрощенном виде применение <td> выглядит так:
<table>
<tr>
<td>...</td>
</tr>
</table>
Атрибуты тега
На практике, применяя тег <td>, нельзя забывать об атрибутах. Важно заметить, что некоторые из списка ниже совпадают с атрибутами главного тега <table> и могут применяться как совместно с ним, так и отдельно. Итак, выделим 8 часто применяемых атрибутов:
- height, необходимый в тех случаях, когда браузер самостоятельно регулирует высоту ячеек в зависимости от их содержимого. Если указанный height меньше содержимого ячейки, атрибут будет игнорироваться. При правильном использовании он позволит добавить свободное пространство по вертикали.
- valign служит для выравнивания данных в ячейке по вертикали. Есть 4 варианта применение этого атрибута: baseline, top, middle и bottom.
- width используется не очень часто. Позволяет корректировать ширину ячейки. Бывают случаи, когда ширина информации, содержащейся в ячейке, превышает указанное значение width. Браузер форматирует текст, чтобы он поместился в эти значения. Если это невозможно, то атрибут просто игнорируется. Поэтому следует уделять особое внимание расположению информации в ячейках.
- rowspan применяется для вертикального объединения ячеек. Соответственно смысл применять такой атрибут есть только при наличии таблицы состоящей из нескольких строчек.
- align выравнивает информацию в ячейке горизонтально. Соответственно доступны значения: left, right, и center.
- bgcolor задает фоновый цвет ячейки. Возможно применение совместно с таким же атрибутом тега <table> для получения дополнительных эффектов.
- colspan применяется аналогично атрибуту rowspan, но отличается тем, что объединяет ячейки по горизонтали.
- background необходим для установки пользовательского изображения в ячейку. Для правильного отображения картинку нужно подготовить заранее, установив высоту и ширину такие же, как у ячейки. Браузер отображает такую картинку только в 100% масштабе. Если изображение окажется меньше, чем ячейка, то оно начнет дублироваться по горизонтали и вертикали выстраиваясь в мозаику. Желательно подготавливать такое изображение заранее.
Тег <td> работает со всеми доступными на данный момент браузерами. Некоторые атрибуты из приведенных ниже признаны устаревшими из-за совместного использования HTML 5 совместно с CSS.