HTML- таблицы

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

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

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

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

Пример

HTML код

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

Результат

Результат

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

Границы

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

Пример

HTML код

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

Результат

Результат

При работе с 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>

Результат

Результат

В 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>

Результат

Результат

Проценты

Пример

HTML код

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

Результат

Результат

Атрибут 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>

Результат

Результат

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

Атрибут 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>

Результат

Результат

Цвета

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

Пример

HTML код

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

Результат

Результат

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

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

Пожалуйста, оставляйте ваши комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, отклики, подписки!

Пожалуйста, опубликуйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, лайки, отклики, подписки низкий вам поклон!

РедакцияПеревод статьи «HTML Tables»