Affiliate link

HTML - Table

HTML table is a structure of rows and columns for viewing tabular data. The elements are :

• <table>

  Defines a table
• <tr>

  Defines a table row
• <th>

  Defines a table column for header
• <td>

  Defines a table column for data
• <caption>

  Defines a table caption (table title)
• <colgroup>

  Specifies a group of one or more columns in a table for formatting
• <col>

  Specifies column properties for each column within a <colgroup> element
• <thead>

  Groups the header content in a table
• <tbody>

  Groups the body content in a table
• <tfoot>

  Groups the footer content in a table

HTML Table structure

Basic structure for HTML table. <table>, <tr>, <th>, <td>

Example

<table>
    <tr>
        <th>Company</th>
        <th>Name</th>
        <th>Position</th>
    </tr>
    <tr>
        <td>LearnCodeNow</td>
        <td>Maria</td>
        <td>HTML Developer</td>
    </tr>
    <tr>
        <td>LearnDBNow</td>
        <td>Andy</td>
        <td>Software Engineer(HTML)</td>
    </tr>
</table>

HTML Table - th, td border

HTML border attribute is depreciated in HTML5. Use CSS border property to display border.

Example

.bordered {
    th, td {
        border: 1px solid black;
    }
}

HTML Table - Grouping Table Header and Data

Grouping Table Header and Data by using colspan and rowspan.

Example

<table class="bordered">
    <tr>
        <th colspan="2">Person</th>
        <th rowspan="2">Position</th>
    </tr>
    <tr>
        <th>First</th>
        <th>Last</th>
    </tr>
    <tr>
        <td colspan="2">Will Code</td>
        <td>CEO</td>
    </tr>
    <tr>
        <td>LearnDBNow</td>
        <td>Andy</td>
        <td>CTO</td>
    </tr>
</table>

Code result

Affiliate link