HTMl Tables

HTML tables allow web developers to arrange data into rows and columns.

HTML Basic Table

The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
The <tr> element defines a row of cells in a table.
The <th> element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
The <td> element defines a cell of a table that contains data.

         <table>
            <tr>
                <th>Person</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Chris</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Denis</td>
                <td>45</td>
            </tr>
        </table>

Person Age
Chris 38
Denis 45


Table CSS styling

styling of css properties for table. 

        table {
            border: 1px solid #333;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px;
            text-align: center;
        }

Person Age
Chris 38
Denis 45


Table attributes - rowspan & colspan

The rowspan attribute contains a integer value that indicates for how many rows the cell extends. Its default value is 1. For vertical spanning use rowsapn
Whereas, the colspan attribute contains a integer value that indicates for how many colspan the cell extends. Its default value is 1. For horizontal spanning use colspan

        <table>
            <tr>
                <th>Category</th>
                <th>Items</th>
                <th>Price</th>
            </tr>
            <tr>
                <td rowspan="2">Fruits</td>
                <td>Apples</td>
                <td>$ 5</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>$ 7</td>
            </tr>
            <tr>
                 <td colspan="2>Total</td>
                <td>$ 12</td>
            </tr>
        </table>

Category Items Price
Fruits Apples $ 5
Oranges $ 7
Total $ 12