Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

HTML Table

HTML table provides a way to derive or define the data such as text, images, links etc in terms of rows and columns of cells. HTML Tables are used for formatting of data using Rows and Columns. We all kno

It is used to display data in tabular form (row * column). There can be many columns in a row. An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

TagDescription
<table>This HTML Tag defines a table.
<tr>This Tag defines a row in a table.
<th>This Tag defines a header cell in a table.
<td>This Tag defines a cell in a table.
<caption>This tag is used for the table caption.
<colgroup>It specifies a group of one or more columns in a table for formatting.
<col>This HTML Tag is used with <colgroup> element to specify column properties for each column in HTML Table.
<tbody>It is used to group the body content in an HTML table.
<thead>It is used to group the header content in a table.
<tfooter>It is used to group the footer content in a table.

Basic HTML Table Usage

Basic HTML Table will have all the attributes like <td, <tr>,<th> and <table>.

<body>
   <table>

         <tr>

            <th>Name</th>
            <th>Country</th>

         </tr>

         <tr>

            <td>Dhoni</td>

            <td>India</td>

         </tr>
         <tr>

            <td>David Miller</td>
            <td>South Africa</td>
         </tr>

   </table>
</body>
HTML Table Usage

Table Caption

The caption for the table is specified by using <caption> tag. It helps in defining the caption of the table.

<body>
   <table border = "1">
         <caption>This is table caption</caption>
         <tr>
            <th>Name</th>
            <th>Country</th>
         </tr>
         <tr>
            <td>Dhoni</td>
            <td>India</td>
         </tr>
         <tr>
            <td>David Miller</td>
            <td>South Africa</td>
         </tr>
   </table>
</body>

HTML Table Cell Spacing

The space of the table cells can be defined by using the cellspacing attribute. The cellspacing attribute specifies the space between table cells.

<body>
   <table border = "1" cellspacing="15">
         <caption>This is table caption</caption>
         <tr>
            <th>Name</th>
            <th>Country</th>
         </tr>
         <tr>
            <td>Dhoni</td>
            <td>India</td>
         </tr>
         <tr>
            <td>David Miller</td>
            <td>South Africa</td>
         </tr>
   </table>
</body>

HTML Table Cell Padding

The padding of the table cells can be defined by using the cellpadding attribute. The cellpadding attribute distance between table cell border and data.

<body>
   <table border = "1" cellpadding="15">
         <caption>This is table caption</caption>
         <tr>
            <th>Name</th>
            <th>Country</th>
         </tr>
         <tr>
            <td>Dhoni</td>
            <td>India</td>
         </tr>
         <tr>
            <td>David Miller</td>
            <td>South Africa</td>
         </tr>
   </table>
</body>

HTML Table Colspan and Rowspan

The two or more HTML table rows can be merged into a single row by using rowspan attribute and table columns can be merged into a single column by using a colspan attribute.

<body>
   <table border = "1">
         <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
         </tr>
         <tr>
            <td rowspan = "2">Row One</td>
            <td>Row Two</td>
            <td>Row Three</td>
         </tr>
         <tr>
            <td>Row Four</td>
            <td>Row Five</td>
         </tr>
         <tr>
            <td colspan = "3">Row Six</td>
         </tr>
   </table>
</body>

Table Background

The background of the table can be created by using the bgcolor attribute. The table cell border can be specified by using the border-color attribute.

<body>
   <table border = "1" bordercolor = "red" bgcolor = "lightblue">
         <tr>
         <th>Name</th>
         <th>Country</th>
         </tr>
         <tr>
         <td>Dhoni</td>
         <td>India</td>
         </tr>
   </table>
</body>

Table Height and Width

The height and width of the table can be set by using width and height attributes.

<body>
   <table border = "1" width = "500" height = "250">
         <tr>
         <th>Name</th>
         <th>Country</th>
         </tr>
         <tr>
         <td>Dhoni</td>
         <td>India</td>
         </tr>
   </table>
</body>

Nested Table

We can also embed one table inside another table known as a nested table.

<body>
   <table border = "1">
         <tr>
         <td>
         <table border = "1">
         <tr>
         <th>Name</th>
         <th>Country</th>
         </tr>
         <tr>
         <td>Dhoni</td>
         <td>India</td>
         </tr>
         </table>
         </td>
         </tr>
     </table>
</body>

Supporting Browsers

ElementChromeIEFirefoxOperaSafari
<table>YesYesYesYesYes