Как создать таблицу HTML с подколонками?

Question

Я хотел бы сделать таблицу HTML, выражающую следующую структуру:

ColumnHeading1   ColumnHeading2 
SubHeading1A SubHeading1B SubHeading2A Subheading2B 
data1A  data1B  data2A  data2B 
data1A  data1B  data2A  data2B 
data1A  data1B  data2A  data2B 
data1A  data1B  data2A  data2B 
... 

Как я могу сделать это с помощью тегов, как <table>, <tr>, <th>, <td>? Я не знаю, как выровнять ColumnHeading2 с SubHeading2A.

Answer 1

Что-то вроде этого?

<table> 
    <tr> 
    <th>ColumnHeading1</th> 
    <th>ColumnHeading2</th> 
    </tr> 
    <tr> 
    <td>SubHeading1A</td> 
    <td>SubHeading1B</td> 
    <td>SubHeading2A</td> 
    <td>SubHeading2B</td> 
    </tr> 
    <tr> 
    <td>data1A</td> 
    <td>data1B</td> 
    <td>data2A</td> 
    <td>data2B</td> 
    </tr> 
</table> 

Answer 2

Это очень просто. Скопируйте приведенный ниже код и начать

<table> 
    <thead> 
    <tr> 
    <th colspan="2">head1</th> 
      <th colspan="2">head1</th> 
    </tr> 

    <tr> 
    <th>subhead</th> 
    <th>subhead</th> 
    <th>subhead</th> 
    <th>subhead</th> 
</tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 

    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 

    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 
     <td>data</td> 

    </tr> 
    </tbody> 
</table> 

Answer 3

Атрибут colspan позволит вам иметь таблицы заголовки (th) и клеток (td), которые охватывают несколько столбцов. Аналогично, rowspan позволит заголовкам и ячейкам охватывать несколько строк.

table { 
 
    border-collapse: collapse; 
 
} 
 

 
th, 
 
td { 
 
    border: 1px solid #888; 
 
    padding: 0.25em 0.5em; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2">ColumnHeading1</th> 
 
     <th colspan="2">ColumnHeading2</th> 
 
    </tr> 
 
    <tr> 
 
     <th>SubHeading1A</th> 
 
     <th>SubHeading1B</th> 
 
     <th>SubHeading2A</th> 
 
     <th>SubHeading2B</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>data1A</td> 
 
     <td>data1B</td> 
 
     <td>data2A</td> 
 
     <td>data2B</td> 
 
    </tr> 
 
    </tbody> 
 
</table>