HTML- таблицы

HTML-таблицы используются для организации содержимого веб-страницы с помощью строк и столбцов. Также они применяются для разметки страниц (например, HTML выравнивания текста).

Таблицы задаются с помощью тегов для создания строк и столбцов. Строки таблицы располагаются горизонтально, а столбцы вертикально.

Основные теги HTML – таблиц

Таблица создается с помощью тега <table>. Строки таблицы создаются с помощью тега <tr>, а столбцы с помощью тега <td>.

Пример

HTML код

<table border=”1″>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Результат

html_tables

В приведенном выше примере использован атрибут border для отображения рамки таблицы. Созданные границы можно использовать в качестве ориентира для выравнивания текста в HTML.

Границы

Атрибут border задает границы HTML-таблицы. Его значение устанавливает толщину рамки. Чтобы удалить рамку, измените значение атрибута на 0.

Пример

HTML код

<table border="1">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Результат

html_tables

При работе с HTML-таблицами рекомендуется использовать рамку толщиной не менее 1px. Это позволит видеть, как отображается контент. После того, как работа с HTML-таблицей будет завершена, и контент будет отображаться должным образом, можно отключить отображение рамки.

Выравнивание

Атрибут align используется для выравнивания текста в таблице HTML.

Пример

HTML код

<table border="1" align="right">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
<p>This is some example text to demonstrate how to align a table in HTML.</p>
<p>The table can be aligned left, right or center. .</p>

Результат

align

В HTML 4 атрибут align является устаревшим и не поддерживается в HTML 5. Вместо него для выравнивания текста по ширине в HTML используется CSS:

CSS: <table style=”float:left”>

Ширина

Атрибут width задает ширину HTML-таблицы. Если он не указан, таблица автоматически растягивается и отображается в соответствии с содержимым ячеек.

Ширина таблицы задается с помощью CSS свойства width в пикселях или процентах. Пиксели используются для определения точной ширины, в то время как проценты используются, чтобы таблица автоматически изменялась в зависимости от содержимого страницы и ширины окна браузера.

Пиксели

Пример

HTML код

<table border="1" width="100">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Результат

pixels

Проценты

Пример

HTML код

<table border="1" width="30%">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Результат

percentage

Атрибут width устарел в HTML 4 и не поддерживается в HTML 5. Вместо этого используется CSS:

CSS: width: <value>;

Заголовок таблицы

Тег <th> определяет заголовок HTML-таблицы. Текст в заголовке отображается полужирным шрифтом по центру без выравнивания текста в ячейке таблицы HTML. А текст в стандартных ячейках отображается стандартным шрифтом и выровнен по левому краю.

Объединение столбцов

Атрибут colspan используется, чтобы объединить ячейки нескольких столбцов.

Пример

HTML код

<table border="1" style="width:50%;">
<tr>
<th colspan="2">Table Header</th>
</tr>
<tr>
<td>Text</td><td>Text</td>
</tr>
</table>

Результат

colspan-300x55

Объединение строк

Атрибут rowspan используется для объединения ячеек нескольких строк.

Пример

HTML код

<table border="1" style="width:50%;">
<tr>
<th rowspan="2">Table Header</th>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
</tr>
</table>

Результат

rowspan-300x55

Цвета

Атрибут bgcolor определяет цвет фона HTML-таблицы.

Пример

HTML код

<table border="1" bgcolor="#CCCCCC">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Результат

table_colors

Атрибут bgcolor (как и align при выравнивании текста в ячейке таблицы HTML) является устаревшим и не поддерживается в HTML 5. Вместо него используется CSS:

CSS: <table style=”background-color:blue”>

Перевод статьи “HTML Tables” был подготовлен дружной командой проекта Сайтостроение от А до Я.