Очень часто возникает необходимость представить какие-то данные на сайте в виде таблицы.
Контейнером для таблицы HTML является парный тег <table></table>.
Заголовок таблицы оборачивается в тег <caption></caption>.
Строки таблицы заключаются в парный тег <tr></tr>, а ячейки этих строк заключаются в тег <td></td>.
Для определения границ таблицы используется свойство border, но лучше это свойство определять в файле CSS.
<html>
<head>
<meta charset= "utf-8">
<title>Таблицы HTML</title>
</head>
<body>
<table border= "1">
<caption>Заголовок таблицы</caption>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
Для объединения ячеек по горизонтали используется атрибут colspan. В качестве значения для этого атрибута используется целое положительное число, т.е. число ячеек, которые мы хотим объединить.
<html>
<head>
<meta charset= "utf-8">
<title>Таблицы HTML</title>
</head>
<body>
<table border= "1">
<caption>Заголовок таблицы</caption>
<tr>
<td colspan= "2">Ячейка 1 и 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
Для объединения ячеек по вертикали используется атрибут rowspan.
<html>
<head>
<meta charset= "utf-8">
<title>Таблицы HTML</title>
</head>
<body>
<table border= "1">
<caption>Заголовок таблицы</caption>
<tr>
<td rowspan= "2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
Как стилизовать таблицу с помощью CSS читайте здесь.