HTML – Tables

HTML table is used to create tables. It helps you to arrange the data in the rows and columns

Table Example-

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

<head><style>body{font-family:Arial,sans-serif}table{width:100%;border-collapse:collapse;margin:20px auto}th,td{border:1px solid #ddd;padding:10px;text-align:left}th{background-color:#4a90e2;color:#fff}tr:nth-child(even){background-color:#f9f9f9}tr:nth-child(odd){background-color:#fff}</style></head>

<table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Job Title</th>

</tr>
        </thead>
        <tbody>
            <tr>
                <td>James</td>
                <td>Matman</td>
                <td>Chief Sandwich Eater</td>

</tr>
            <tr>
                <td>Andor</td>
                <td>Nagy</td>
                <td>Designer</td>

</tr>
            <tr>
                <td>Tamas</td>
                <td>Biro</td>
                <td>Game Tester</td>

</tr>
            <tr>
                <td>Zoli</td>
                <td>Mastah</td>
                <td>Developer</td>

</tr>
            <tr>
                <td>Szabi</td>
                <td>Nagy</td>
                <td>Chief Sandwich Eater</td>

</tr>
        </tbody>
    </table>

In the above table, first row in the table header. And rest of the row and column come under table body.

Now we will see all HTML tags and all HTML table attributes.

All HTML Table tags

<table> Used to create a table.

<th> Used for a header cell in the table.

<tr> Used for creating a row in the table.

<td> Used for creating a column in the table.

<caption> Used for a table caption.

<colgroup> Group of one or more columns in a table for formatting.

<col> Column properties for each column within a <colgroup> element.

<thead> Used to create header content in the table.

<tbody> Used for grouping body content of the table.

<tfoot> Used for the table footer.

All HTML Table Attributes

border:- Used to add a border to the table.

cellpadding:-Specifies the space between the cell content and the cell borders.

cellspacing:- Specifies the space between cells.

width:- Used to adjust the width of the table.

height:- Used to adjust the height of the table.

summary:- Provides a summary or description of the table’s purpose and structure.

align:- Specifies the horizontal alignment of the table on the page.

bgcolor:- Sets the background color of the table.

colspan:- Specifies the number of columns a cell should span.

rowspan:- Specifies the number of rows a cell should span.

Table Hierarchy-

PREVIOUS NEXT