HTML Tables

last edited on: 21-Jan-2018; tagged: html


HTML table use to show various data like text, images, links and other tables in tabular format. We can define Tables in HTML with the <table> tag. A table is divided into rows and columns. With the <tr> tag, we can define a table row, and each row is divided into data cells. With the <td> tag, we can define table cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Cellpadding and Cellspacing attribute

The cellpadding and cellspacing attributes are used to adjust white space inside a table.

Cellpadding: it specifies the amount of space between the border of a table cell and its contents.

Cellspacing: It specifies the space, in pixels, between cells.

Table Border Attribute

The border attribute specifies if a border should be displayed around the table cells. 1 mean yes 0 mean not to show any border.

HTML <caption> Tag

The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. One table can have only one <caption> tag.

HTML <thead> Tag

The <thead> tag is used to group header content in an HTML table. Browsers can use these elements to enable scrolling of the table body. When printing a large table that spans in multiple pages, these elements (<thead>,<tbody>,<tfoot>) can enable the table header and footer to be printed at the top and bottom of each page.

HTML <tbody> Tag

The <tbody> tag is used to group the body content in an HTML table.

HTML <tbody> Tag

The <tfoot> tag is used to group footer content in an HTML table. The <tfoot> element must one or multiple <tr> tag inside of it.

Table heading the <tr> tag

The <tr> tag defines a table row in HTML table and each row is divided into data cells. A <tr> tag can contain one or multiple <td> or <th> tag.

Table heading the <th> tag

Table heading can be defined using <th> tag. Browser’s built-in style sheets will display the text in the <th> element as bold and centered etc. The colspan attribute of the <th> tag defines the number of columns a cell should span and the rowspan attribute of the <th> tag specifies the number of rows a cell should span.

Table cell the <td> tag

Table cell can be defined using <td> tag. The colspan attribute of the <td> tag defines the number of columns a cell should span and the rowspan attribute of the <td> tag specifies the number of rows a cell should span.

Example of HTML Table

<table border=1 cellpadding=5 cellspacing=5> 
    <caption>Table Example</caption> 
    <thead> 
        <tr> <th colspan="3">Invoice #123456789</th> <th>21 January 2018 </th></tr> 
        <tr> <td colspan="2"> <strong>Pay to:</strong><br> Logno Technologies<br> 123 Main St.<br> Allegany, MD 12345 </td> <td colspan="2"> <strong>Customer:</strong><br> David Zuckerman<br> 321 Willow Way<br> Accomack, VA 123456 </td> </tr> 
    </thead> 
    <tbody>
        <tr> <th>Name / Description</th> <th>Qty.</th> <th>Rate</th> <th>Cost</th> </tr>
        <tr> <td>Paperclips</td> <td>1000</td> <td>0.01</td> <td>10.00</td> </tr>
        <tr> <td>Staples (box)</td> <td>100</td> <td>1.00</td> <td>100.00</td> </tr>
    </tbody> 
    <tfoot>
        <tr> <th colspan="3">Subtotal</th> <td> 110.00</td> </tr>
        <tr> <th colspan="2">Tax</th> <td> 8% </td> <td>8.80</td> </tr>
        <tr> <th colspan="3">Grand Total</th> <td>$ 118.80</td> </tr> 
    </tfoot>
</table>

Related

HTML Form

tagged: html