Как сделать таблицу в html, код таблицы
В данной статье рассмотрим, как сделать таблицу в html. Для создания таблицы используются теги <table> и </table> внутри, которых содержатся теги строк <tr> и </tr>, а внутри строк находятся столбцы <td> и </td>. Пример, как сделать таблицу в html: <table><tr><td>текст ячейки</td></tr></table>.
Содержание статьи
Наглядный пример кода создания таблицы на html
При создании таблицы в html важно соблюдать следующие правила:
- Минимум 1 ячейка. Из правила следует, что в таблице должны быть как минимум теги столбцов, в частности <td> и </td>, ведь таблиц без ячеек не бывает.
- наличие минимум 3 тегов: <table> </table>, <tr> </tr>, <td> </td> Нельзя использовать <td> без <tr> и <table>, все эти теги обязательно должны быть.
- Точное следование иерархии. Иерархия вложенности всегда должна быть одинаковой: <table> содержит <tr>, внутри которого <td>, т. е. менять местами теги <tr> и <td> нельзя.
Пример html кода таблицы (2 строки и 5 столбцов)
Результат в браузере
Html код, как сделать таблицу
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
<style> td {border: 1px solid #9e9e9e} </style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
</table>
</body>
</html>
Код <style> td {border: 1px solid #9e9e9e} </style> означает создание рамки вокруг ячеек размером 1 пиксель и цветом "9e9e9e".
Пример html кода таблицы (5 строк и 2 столбца)
Результат в браузере
Html код, как вставить таблицу
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
<style> td {border: 1px solid #9e9e9e} </style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
</tr>
</table>
</body>
</html>
Как объединить ячейки в таблице на html
Достаточно часто возникают случаи, когда необходимо объединить несколько столбцов или строк, для этих целей в html есть атрибуты: colspan (объединение столбцов) и rowspan (объединение строк). Значение, указанное внутри colspan и rowspan — количество строк или столбцов, на которое будет расширена текущая ячейка. Поскольку ячейка будет расширена, то свободные места должны быть пустыми и создавать там ячейки не нужно, иначе они будут вытеснены.
Наглядный пример кода таблицы на html с объединением ячеек
Важно: Атрибуты объединения ячеек(строк, столбцов) можно писать только внутри тега <td>.
Пример html кода таблицы с объединением ячеек по вертикали
Результат в браузере
Html код, как сделать объединение ячеек в таблице по вертикали
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
<style> td {border: 1px solid #9e9e9e} </style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td>4.1</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
</tr>
</table>
</body>
</html>
Пример html кода таблицы как объединить ячейки по горизонтали
Результат в браузере
Html код, как объединить ячейки в таблице по горизонтали
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Тестовая страница</title>
<style> td {border: 1px solid #9e9e9e} </style>
</head>
<body>
<table>
<tr>
<td>1.1</td>
<td colspan="3">1.2</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
</table>
</body>
</html>
