(Display example on screen)
Properties of a table
border and width,height,cellpadding,cellspacing
Child tags of a table
<caption> Title of the table
<thead><tbody><tfoot> Used to split the header, body, and footer of a table and is optional.
The reason for this is to improve web accessibility and to make it easier to modify CSS by grouping header body footer (see thead's style in the example)
<colgroup><col span="n"> vertical rows of a table can be grouped and managed (see the style of <col span="2">in the example)
<tr> means row
<th>,<td> are used as child elements of tr
Depending on whether tr is a header or body, th (for headers),td for body
column
rowspan indicates the merge of rows and defaults to 1
colspan indicates the merge of columns and defaults to 1
<table border="1" width="300px" height="150px" style="table-layout: Fixed;">
<colgroup>
<col span="1"> <!-- Enclose column 1 -->
<col span="2" style="background:beige;" /> <!-- Enclose columns 2 and 3 (since span="2" is set) -->
</colgroup>
<caption>
caption
</caption>
<thead style="background:darkgrey;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody style="text-align:center;" >
<tr>
<td rowspan="2">rowspan = 2</td>
<td colspan="2">colspan = 2</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</tbody>
<tfoot style="text-align:center;" >
<tr>
<td colspan="3">colspan = 3</td>
</tr>
</tfoot>
</table>
Table's table-layout attribute
Default
<table style="table-layout: Auto;">
is set to autoWhen set to auto, the width of the columns will automatically be set according to the length of the content
Also, the
<table style="table-layout: Fixed;">
will set the width of the columns evenly based on the width of the table without referring to the length of the contentSo it is also possible to apply the width of each td manually
If you don't know table-layout:Fixed had a problem with the width after colspan not being correct because I didn't know it was fixed, but Ben pointed out the above issue and I was able to fix it
Reference