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
1 | 2 |
3 | 4 |
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.
Column 1 | Column 2 | |
---|---|---|
Row 1 | 1 | 2 |
Row 2 | 3 | 4 |
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.
Month | Savings |
---|---|
January | $150 |
February | $100 |
2. align:
The align attribute specifies the alignment of a table. align attribute can have following values.
Value | Description |
---|---|
left | Left-aligns the table. |
right | Right-aligns the table. |
center | Center-aligns the table. |
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.
Month | Savings |
---|---|
January | $150 |
February | $100 |
3. cellpadding:
The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content.
Value | Description |
---|---|
pixels | The space 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.
Month | Savings |
---|---|
January | $150 |
February | $100 |
4. cellspacing:
The cellspacing attribute specifies the space, in pixels, between cells.
Value | Description |
---|---|
pixels | The space 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.
Month | Savings |
---|---|
January | $150 |
February | $100 |
5. bgcolor:
The bgcolor attribute specifies a background color of a table.
Value | Description |
---|---|
color_name | Specifies the background color with a color name (like "red"). |
hex_number | Specifies the background color with a hex code (like "#ff0000"). |
rgb_number | Specifies the background color with an rgb code (like "rgb(255,0,0)"). |
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:
Month | Savings |
---|---|
January | $150 |
February | $100 |
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.
Value | Description |
---|---|
left | Left-aligns the table. |
right | Right-aligns the table. |
center | Center-aligns the table. |
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.
Month | Savings |
January | $150 |
February | $100 |
2. bgcolor:
The bgcolor attribute specifies a background color of a row.
Value | Description |
---|---|
color_name | Specifies the background color with a color name (like "red"). |
hex_number | Specifies the background color with a hex code (like "#ff0000"). |
rgb_number | Specifies the background color with an rgb code (like "rgb(255,0,0)"). |
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.
Month | Savings |
---|---|
January | $150 |
February | $100 |
Attributes of Cells(<th> and <td>)
1. align:
The align attribute specifies the horizontal alignment of the content in a cell.
Value | Description |
---|---|
left | Left-aligns the table. |
right | Right-aligns the table. |
center | Center-aligns the table. |
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.
Month | Savings |
---|---|
January | $150 |
February | $100 |
2. bgcolor:
The bgcolor attribute specifies the background color of a cell.
Value | Description |
---|---|
color_name | Specifies the background color with a color name (like "red"). |
hex_number | Specifies the background color with a hex code (like "#ff0000"). |
rgb_number | Specifies the background color with an rgb code (like "rgb(255,0,0)"). |
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:
Month | Savings |
---|---|
January | $1050 |
February | $100 |
3. colspan:
The colspan attribute defines the number of columns a header cell should span.
Value | Description |
---|---|
number | Sets 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.
Monthly Savings | |
---|---|
January | $150 |
February | $100 |
4. rowspan:
The rowspan attribute defines the number of rows a cell should span.
Value | Description |
---|---|
number | Sets the number of rows a header 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.
Savings for holidays | Month | Savings |
---|---|---|
January | $150 | |
February | $100 |