HTML Table

In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Using tables to divide the page into different sections is an extremely powerful tool. The HTML Table Element represents data in two dimensions or more. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. Header information in a table is defined with the <th> tag. A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. For Example

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
    

The table contains the 2 rows and 2 columns. So under the <table> tag create <tr> tag that defines the row and add two columns using <td> tags in each row and put content inside the each cell. Set the border of the table using Border="1" attribute. Here is the result of this code

Table has two types of cells Header cells (<th>) and standard cells (<td>). <th> defines a header cell in an HTML. The text in <th> elements are bold and centered by default. See the example below for more understanding.

<table border="1" >
    <tr>
        <th width="100">
        
        </th>
        <th width="100">
            Column 1
        </th>
        <th width="100">
            Column 2
        </th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td>
            1
        </td>
        <td>
            2
        </td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>
            3
        </td>
        <td>
            4
        </td>
    </tr>
</table>
    

In the output of the above code the header cell(<th>) text is bod and center aligned.

Attributes of Table(<table>)

1. border:

The border attribute specifies if a border should be displayed around the table cells or not. The value "1" indicates borders should be displayed. the value of the borber can be any number greater than 0.

In the next example create the table and set the border="5".

<table border="5" >
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$100</td>
    </tr>
</table>

Here is the result of this code. border="5" set the 5px border around the table and cells also has border around them.

2. align:

The align attribute specifies the alignment of a table. align attribute can have following values.

In the next example create the table and set the align="center".

<table border="1" align="center">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$100</td>
    </tr>
</table>

table has align attribute value is center. The browser draws the table center of the screen/centainer. Here is the result of this code.

3. cellpadding:

The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content.

In the next example create the table and set the cellpadding="10".

<table border="1" align="center" cellpadding="10">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$100</td>
    </tr>
</table>

Here is the result of this code and you can see the 10 pixel space between the cell wall and content.

4. cellspacing:

The cellspacing attribute specifies the space, in pixels, between cells.

In the next example create the table and set the cellspacing="10".

<table border="1" align="center" cellspacing="10">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$100</td>
    </tr>
</table>

Here is the result of this code. A 10 pixel space between the cells can be seen in the output.

5. bgcolor:

The bgcolor attribute specifies a background color of a table.

In the next example create the table and set the bgcolor="sky blue".

<table border="1" align="center" bgcolor="sky blue">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$100</td>
    </tr>
</table>

Here is the result of this code:

Table Row (<tr>)

<tr> represents the row of the table. <tr> also has some attributes that can be applied on it.

Attributes of Table(<tr>)

1. align:

The align attribute specifies the alignment of a table row contents.

In the next example create the table and defines row using <tr> tag and set the align attribute of the first row left, center of the second and right of the third row.

<table border="1" align="center" bgcolor="sky blue" cellpadding="5" cellspacing="0">
    <tr align="left">
        <td width="200">
            Month
        </td>
        <td width="200">
            Savings
        </td>
    </tr>
    <tr align="center">
        <td>
            January
        </td>
        <td>
            $150
        </td>
    </tr>
    <tr align="right">
        <td>
            February
        </td>
        <td>
            $100
        </td>
    </tr>
</table>
    

In the result of this code, the content of the first row is left align, content of the second row is center align and content of the third row is right align.

2. bgcolor:

The bgcolor attribute specifies a background color of a row.

In the next example create a table and set the different bgcolor for different rows(<tr>).

<table align="center" cellpadding="5" cellspacing="0">
    <tr align="left" bgcolor="#a1a1a1">
        <th>
            Month
        </th>
        <th>
            Savings
        </th>
    </tr>
    <tr align="left" bgcolor="green">
        <td>
            January
        </td>
        <td>
            $150
        </td>
    </tr>
    <tr align="left" bgcolor="green">
        <td>
            February
        </td>
        <td>
            $100
        </td>
    </tr>
</table>
 

Here is the result of this code.

Attributes of Cells(<th> and <td>)

1. align:

The align attribute specifies the horizontal alignment of the content in a cell.

In the next example create a table and set align attribute of th and td.

<table border="1" align="center" cellpadding="5" cellspacing="0">
    <tr bgcolor="pastel green">
        <th align="left" width="100">
            Month
        </th>
        <th align="left"  width="100">
            Savings
        </th>
    </tr>
    <tr bgcolor="green">
        <td>
            January
        </td>
        <td  align="right">
            $150
        </td>
    </tr>
    <tr bgcolor="green">
        <td>
            February
        </td>
        <td align="right">
            $100
        </td>
    </tr>
</table>

Here is the result of this code. The content under the "Savings" column is right align and other content is left align.

2. bgcolor:

The bgcolor attribute specifies the background color of a cell.

In the next example, create table and set the bgcolor of the different cells(<th> and <td>).

<table align="center" cellpadding="5" cellspacing="0">
    <tr>
        <th bgcolor="yellow" width="100">
            Month
        </th>
        <th bgcolor="navy"  width="100" >
            Savings
        </th>
    </tr>
    <tr bgcolor="green">
        <td>
            January
        </td>
        <td  bgcolor="blue">
            $1050
        </td>
    </tr>
    <tr bgcolor="green">
        <td>
            February
        </td>
        <td  bgcolor="maroon">
            $100
        </td>
    </tr>
</table>

Here is the result of this code:

3. colspan:

The colspan attribute defines the number of columns a header cell should span.

In the next example define a table and set colspan="2"

<table border="1" align="center">
    <tr>
        <th colspan="2">
            Monthly Savings
        </th>
    </tr>
    <tr>
        <td width="100">
            January
        </td>
        <td width="100">
            $150
        </td>
    </tr>
    <tr>
        <td>
            February
        </td>
        <td>
            $100
        </td>
    </tr>
</table>

Here is the result of this code. The header column has colspan="2" thats why it reserves a space of two columns.

4. rowspan:

The rowspan attribute defines the number of rows a cell should span.

In the next example create a table and set the rowspan="3" for the first header cell th.

<table border="1" align="center" bgcolor="sky blue" cellpadding="6" cellspacing="0">
    <tr>
        <th rowspan="3">
            Savings for holidays
        </th>
        <th>
            Month
        </th>
        <th>
            Savings
        </th>
    </tr>
    <tr>
        <td>
            January
        </td>
        <td>
            $150
        </td>
    </tr>
    <tr>
        <td>
            February
        </td>
        <td>
            $100
        </td>
    </tr>
</table>
  

Here is the result of this code and you can see the first cell reserved the space of the 3 rows.