HTML Tables | Codeblox

Tables

<table>
<tr>
    <th>Product</th>
    <th>Quantity</th>
    <th>Price</th>
</tr>
<tr>
    <td>Shoes</td>
    <td>1233</td>
    <td>$100</td>
</tr>
<tr>
    <td>Shirts</td>
    <td>3456</td>
    <td>$40</td>
</tr>
</table>

A simple HTML table.
<table>...</table> - to define a table
<th> Title </th> - represents a table heading
<tr> </tr> - to define a row in a table
<td> Content </td> - to define a table cell

colspan | rowspan

<td colspan="2"> spans over 2 columns </td>

<td rowspan="2"> spans over 2 rows </td>

<td rowspan="2" colspan="2"> spans over 2 rows and columns </td>

Attributes to make a table cell or table header take over multiple columns or rows in a table.

Caption

<table>
    <caption>Title For Table</caption>
    ...
</table>

To give a table a caption.

thead | tbody | tfoot

<table>
    <thead>
        <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Title</th>
            <td>Row Info</td>
        </tr>
        <tr>
            <th>Row Title</th>
            <td>Row Info</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Footer Title</th>
            <td>Footer Info</td>
        </tr>
    </tfoot>
</table>

<thead> - defines a header section of columns of a table
<tbody> - defines the body section of a table
<tfoot> - defines the footer section for a table

Colgroup | Col

<table>
    <colgroup>
    <col>
    <col span="2" class="group1">
    <col span="2" class="group2">
    </colgroup>
</table>

To define a group of columns in a table. Useful for specifying and styling.