WHAT ARE HTML TABLES?

HTML tables are used for displaying data that adds up sense in spreadsheet software. They consist of rows and columns and are often used on websites for the effective displaying of tabular data.

DEFINE HTML TABLE

A table is defined using the <table> element, and contains a variety of table cells<td>, for "table data" which are organized into table rows <tr>. The markup (HTML code) for a table is usually supported on rows, never columns.

Table cells which act as column headers or row headers should use the <th> (table header) element.

Table cells are often merged using the colspan and rowspan attributes.

Tables are often broken into sections using the subsequent elements:

<thead> — Table header
<tbody> — Table body
<tfoot> — Table footer

A caption is often added to a table using the <caption> element. You can use <col> and <colgroup> to define table columns for styling. The subsequent example demonstrates the foremost basic structure of a table.

Example:

<table>
<tr>
    <th>No.</th>
    <th>Name</th>
    <th>Age</th>
</tr>
<tr>
    <td>1</td>
    <td>Peter Parker</td>
    <td>16</td>
</tr>
<tr>
    <td>2</td>
    <td>Clark Kent</td>
    <td>34</td>
</tr>
</table>

Output:

Defining a Table Header, Body, and Footer

HTML provides a series of tags <thead> , <tbody> , and <tfoot> that helps you to make a more structured table, by defining header, body and footer regions, respectively.

The subsequent example demonstrates the utilization of those elements.

Example:

<table>
<thead>
    <tr>
        <th>Item</th>
        <th>Expenditure</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Stationary</td>
        <td>2,000</td>
    </tr>
    <tr>
        <td>Furniture</td>
        <td>10,000</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>Total</th>
        <th>12,000</th>
    </tr>
</tfoot>
</table>

Output:

Note: 5, the <tfoot> element can be placed either before or after the <tbody> and <tr> elements, but must appear after any <caption>, <colgroup>, and <thead> elements.

THE WAY TO ADD CAPTION IN TABLES

You can specify a caption (or title) for your tables using the <caption> element. The <caption> element must be placed directly after the opening <table> tag. By default, the caption appears at the highest of the table, but you can change its position using the CSS caption-side property.

The subsequent example shows the way to use this element during a table.

Example:

<table>
<caption>User Info</caption>
<tr>
    <th>No.</th>
    <th>Name</th>
    <th>Age</th>
</tr>
<tr>
    <td>1</td>
    <td>Peter Parker</td>
    <td>16</td>
</tr>
<tr>
    <td>2</td>
    <td>Clark Kent</td>
    <td>34</td>
</tr>
</table>

Output:

HOW TO ADD MULTIPLE ROWS AND COLUMN

This enables you to increase table rows and columns across multiple other rows and columns. You can use the rowspan or colspan attributes to span multiple rows or columns during a table.

Let's try the following example to know how colspan basically works:

Example:

<table>
<tr>
    <th>Name</th>
    <th colspan="2">Phone</th>
</tr>
<tr>
    <td>John Carter</td>
    <td>5550192</td>
    <td>5550152</td>
</tr>
</table>

Output:

Similarly, you can use the rowspan attribute to make a cell that spans more than one row.

Example:

<table>
<tr>
<th>Name:</th>
    <td>John Carter</td>
</tr>
<tr>
    <th rowspan="2">Phone:</th>
    <td>55577854</td>
</tr>
<tr>
    <td>55577855</td>
</tr>
</table>

Output:

Tip: Don’t use tables for creating website page layouts. Table layouts are slower at rendering, and really difficult to take care of. It should be used only to display tabular data.