html код таблицы

html код таблицы (тег table) рассмотрим на примере.

<table class="demotable">
  <caption>Заголовок к таблице</caption>
  <thead>
    <tr>
       <th>Заголовок столбца 1</th>
       <th>Заголовок столбца 2</th>
       <th>Заголовок столбца 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
       <td>Нижняя колонка 1</td>
       <td></td>
       <td>Нижняя колонка 3</td>
    </tr>
  </tfoot>
  <colgroup>
    <col class="col1"/>
    <col span="2" class="col2"/>
  </colgroup>
  <tbody>
    <tr>
       <td>Ячейка 1</td>
       <td>Ячейка 2</td>
       <td>Ячейка 3</td>
    </tr>
    <tr>
       <td></td>
       <td>Ячейка 5</td>
       <td>Ячейка 6</td>
    </tr>
  </tbody>
</table>

thead - верхняя строка таблицы,
tfoot - нижняя строка таблицы,
tbody - строки, хранящие основное содержание таблицы,
colgroup, col задают стиль для столбцов, атрибут span определяет количество колонок, к которым нужно применить соответствующие свойства. Не имеет приоритета, то есть если противоречащее свойство будет задано для td, то предпочтение будет отдано последнему.
tr - это контейнер строки, который содержит ячейки td или заголовочные ячейки th.

CSS для таблицы

Поскольку сейчас в почёте CSS, то теперь с успехом можно заменить значения атрибутов на соответствующие свойства.

<style type="text/css">
   .demotable {  
    border: 3px groove #eee6a3; 
    border-collapse: separate; /* По умолчанию, когда для каждой ячейки своя граница */ 
    border-spacing: 7px 11px; /* Горизонтальное расстояние 7px и вертикальное 11px между ячейками */
    text-align: center;  
    table-layout: auto; /* По умолчанию. Браузер отображает таблицу после того, как проанализирует размеры ячеек */
   }

   .demotable td, .demotable th {
    border: 2px groove #e1d188;
   }

   .demotable tbody td {
    empty-cells: hide; /* Фон и рамка в пустых ячейках отсутствуют */ 
   }

   .demotable tfoot td {
    empty-cells: show; /* Фон и рамка в пустых ячейках присутствуют */ 
   }

   .demotable th {
    background-color: #dbd1b2;
   }

   .col1 {
    background-color: #f2e8c9;
   }

   .col2 {
    background-color: #fff5d7;
   }
   </style>

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

Заголовок столбца 1	Заголовок столбца 2	Заголовок столбца 3
Нижняя колонка 1		Нижняя колонка 3
Ячейка 1	Ячейка 2	Ячейка 3
	Ячейка 5	Ячейка 6

<style type="text/css">
   .demotable {  
    border: 3px groove #eee6a3; 
    border-collapse: collapse; /* По периметру ячеек только одна линия */ 
    text-align: center;
    table-layout: fixed; /* Таблица загружается быстрее, поскольку уже заданы значения ширины ячеек в теге col */  
   }

   .demotable td, .demotable th {
    border: 2px groove #e1d188;
   }

   .demotable th {
    background-color: #dbd1b2;
   }

   .col1 {
    background-color: #f2e8c9;
    width: 160px;
   }

   .col2 {
    background-color: #fff5d7;
    width: 200px;
   }

   .demotable caption {
    caption-side: bottom; /* Заголовок под таблицей */
    text-align: right;
   }
   </style>

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

Заголовок столбца 1	Заголовок столбца 2	Заголовок столбца 3
Нижняя колонка 1		Нижняя колонка 3
Ячейка 1	Ячейка 2	Ячейка 3
	Ячейка 5	Ячейка 6

На http://css-tricks.com показано, как адаптировать длинные таблицы для экрана мобильного телефона.

html объединение ячеек таблицы

Весь код таблицы можно упростить до варианта:

<table>
  <tr>
      <td>1_1</td>
      <td>1_2</td>
      <td>1_3</td>
      <td>1_4</td>
  </tr>
</table>

1_1

1_2

1_3

1_4

При необходимости увеличиваем количество строк до двух и более с помощью тега tr.

<table>
  <tr>
      <td>1_1</td>
      <td>1_2</td>
      <td>1_3</td>
      <td>1_4</td>
  </tr>
  <tr>
      <td>2_1</td>
      <td>2_2</td>
      <td>2_3</td>
      <td>2_4</td>
  </tr>
  <tr>
      <td>3_1</td>
      <td>3_2</td>
      <td>3_3</td>
      <td>3_4</td>
  </tr>
</table>

1_1	1_2	1_3	1_4
2_1	2_2	2_3	2_4
3_1	3_2	3_3	3_4

Объединяются горизонтальные ячейки благодаря атрибуту colspan. При этом нужно удалить один тег td в том же блоке tr.

<table>
  <tr>
      <td>1_1</td>
      <td colspan="2">1_2 + 1_3</td>
      <td>1_4</td>
  </tr>
  <tr>
      <td>2_1</td>
      <td>2_2</td>
      <td>2_3</td>
      <td>2_4</td>
  </tr>
  <tr>
      <td>3_1</td>
      <td>3_2</td>
      <td>3_3</td>
      <td>3_4</td>
  </tr>
</table>

1_1	1_2 + 1_3		1_4
2_1	2_2	2_3	2_4
3_1	3_2	3_3	3_4

Для объединения вертикальных ячеек, применяем атрибут rowspan. При этом нужно удалить td в нижних блоках tr.

<table>
  <tr>
      <td>1_1</td>
      <td colspan="2">1_2 + 1_3</td>
      <td>1_4</td>
  </tr>
  <tr>
      <td>2_1</td>
      <td>2_2</td>
      <td>2_3</td>
      <td rowspan="2">2_4 + 3_4</td>
  </tr>
  <tr>
      <td>3_1</td>
      <td>3_2</td>
      <td>3_3</td>
  </tr>
</table>

1_1	1_2 + 1_3		1_4
2_1	2_2	2_3	2_4 3_4
3_1	3_2	3_3

Для объединения горизонтальных и вертикальных ячеек используются одновременно оба атрибута colspan и rowspan. А также удаляется соответствующее количество ячеек td, в моём случае от уже имеющегося варианта убираем две ячейки.

<table>
  <tr>
      <td>1_1</td>
      <td colspan="2" rowspan="2">1_2 + 1_3 + 2_2 + 2_3</td>
      <td>1_4</td>
  </tr>
  <tr>
      <td>2_1</td>
      <td rowspan="2">2_4 + 3_4</td>
  </tr>
  <tr>
      <td>3_1</td>
      <td>3_2</td>
      <td>3_3</td>
  </tr>
</table>

1_1	1_2 + 1_3 2_2 + 2_3		1_4
2_1			2_4 3_4
3_1	3_2	3_3