HTML Tables

HTML Tables

HTML Table represents data in a tabular form. It is composed of columns and rows of cells that contain data.
The <table> element defines an HTML Table.

HTML Table Element

  • <thead> : defines a table header
  • <tbody> : defines a table body
  • <tfoot> : defines a table footer
  • <tr> : defines a table row
    • colspan attribute: defines how many columns should a cell span
  • <th> : defines a table heading
  • <td> : defines a table data/cell
    • rowspan attribute : defines how many rows should a cell span; also works in <th>
  • <colgroup> : specifies a group of one or more columns in table
  • <col> : specifies column properties for each column in a colgroup (empty element)
  • <caption> : defines a caption for a table

HTML Table Attributes

  • align : defines the alignment of a table
  • bgcolor : defines the background color of a table
  • border : defines the size of the frame surrounding a table
  • cellpadding : defines the space between the content of a cell and its border
  • cellspacing : defines the space between two cells
  • frame : defines which side of the frame surrounding the table must be displayed
  • rules : define where rules should appear in a table
  • summary : defines an alternative text that summarizes the content of the table
  • width : defines the width of table

⚠️Note! All of the mentioned HTML Table Attributes are already deprecated, it means that they may no longer work in the near future with that reason we are not going to explain them any futher.

💡Athough the attribute are already deprecated we can still create an effect similar to them, using styling Or Cascading Style Sheet (CSS).

Simple Example:

<!doctype html>
<html>
    <head>
        <title> HTML Table </title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>                   
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Coding</td>
                    <td>Sodin</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Footer</td>
                    <td>Footer</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Output:

Table Colgroup, Alignment, Background-color, Width and Border Example:

<!doctype html>
<html>
    <head>
        <title> HTML Table </title>
    </head>
    <body>
        <table style="background-color: cadetblue; width: 80%; margin: 0 auto; border: 2px solid black;">
            <!-- "The margin:0 auto" style aligns the table to center -->
            <colgroup>
                <col style="background-color: blue;">
                <col style="background-color: red;">
                <col style="background-color: green;">
            </colgroup>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Nationality</th>                   
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>coding</td>
                    <td>sodin</td>
                    <td>india</td>
                </tr>
                <tr>
                    <td>CODING</td>
                    <td>SODIN</td>
                    <td>INDIA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>


Output:

Table Border, Cell Padding and Cell Spacing Example:

<!doctype html>
<html>
    <head>
        <title> HTML Table </title>
        <style>
            table, td{
                border: 1px solid black;
                /* cell spacing */
                border-spacing: 5px;
            }
            td{
                /* cell padding*/
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Nationality</th>                   
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>coding</td>
                    <td>sodin</td>
                    <td>india</td>
                </tr>
                <tr>
                    <td>CODING</td>
                    <td>SODIN</td>
                    <td>INDIA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Output:

Collapsing HTML Table Borders

To collapse table borders into one border we have to set the style property "border-collapse" of the table to the value "collapse" i.e "border-collapse: collapse;".

Table Collapsed Border and Colspan Example:

<!doctype html>
<html>
    <head>
        <title> HTML Table </title>
        <style>
            table, td , th{
                border-collapse: collapse;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th colspan="3">Employees</th>
                </tr>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Nationality</th>                   
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>coding</td>
                    <td>sodin</td>
                    <td>india</td>
                </tr>
                <tr>
                    <td>CODING</td>
                    <td>SODIN</td>
                    <td>INDIA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Output:

Table Collapsed Border and Rowspan Example:

<!doctype html>
<html>
    <head>
        <title> HTML Table </title>
        <style>
            table, td , th{
                border-collapse: collapse;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Nationality</th>                   
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>coding</td>
                    <td>sodin</td>
                    <td rowspan="2">india</td>
                </tr>
                <tr>
                    <td>CODING</td>
                    <td>SODIN</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Output:




    
                                                                                

Post a Comment

Post a Comment (0)