Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Tables

First Name Last Name point
Ramesh Patel 50
jai soni 60
pankaj tak 80
HTML Tables

Tables are very useful to arrange in HTML and they are used very frequently by almost all web developers. Tables are just like excel spreadsheets and are designed using rows and columns. We can create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is written out row by row. A row is contained inside a <tr> tag . which creates a table row. And each cell/column is then written inside the row element using a <td> tag . which stands for table data.


<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Output

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

NOTE: In the above example border is an attribute of <table> and it creates border across all the cells. If you do not need a border then you can define border="0". The border attribute and other attributes mentioned in this session are deprecated and they have been replaced by CSS. So it is recommended to use CSS instead of using any attribute directly.

Table Heading - The <th> Element:

Table heading can be defined using <th> element. This tag will be put to replace <td> tag which is used to represent actual data. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element at any place:


<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Douglas Merilier</td>
<td>5000</td>
</tr>
<tr>
<td>Rich Sam</td>
<td>7000</td>
</tr>
</table>

Output

Name Salary
Douglas Merilier 5000
Rich Sam 7000

NOTE: Each cell must, however, have either a <td> or a <th> element in order for the table to display correctly even if that element is empty.

Table Cellpadding and Cellspacing:

There are two attributes called cellpadding and cellspacing which can be used to adjust the white space in your table cell. Cellspacing is used to define the width of the border, while cellpadding represents the spacing between cell borders and inner content. Following is the example:


<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Douglas Merilier</td>
<td>5000</td>
</tr>
<tr>
<td>Rich Sam</td>
<td>7000</td>
</tr>
</table>

Output

Name Salary
Douglas Merilier 5000
Rich Sam 7000
Colspan and Rowspan Attributes:

Colspan attribute is used if you want to merge two or more columns into a single column. Similarly a rowspan can be used if you want to merge two or more rows. Following is the example:


<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Output

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
Tables Backgrounds

You can set table background using one of the following two ways:

  • Using bgcolor attribute - You can set background color for entire table or cell.
  • Using background attribute - You can set background image for entire table or cell.

NOTE:You can set border color also using bordercolor attribute.
Here is an example of using bgcolor attribute:


<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

Output

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1
Table height and width:

You can set a table width and height using width and height attributes. Width or height can be specified in terms of integer value or in terms of percentage of available screen area. Following is the example:


<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Output

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Using Table Caption:

The caption tags is used as a title or explanation and show up at the top of the table. This tag is deprecated in newer version of HTML/XHTML.


<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
</table>
Using a Header, Body, and Footer:

Tables can be divided into three parts: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content of the table.
The three elements for separating the head, body, and foot of a table are:

  • <thead> - to create a separate table header.
  • <tbody> - to indicate the main body of the table.
  • <tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But it is required that <thead> and <tfoot> tags should appear before <tbody>


<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>

Run

Nested Tables:

A table can be used inside another table. Not only tables almost all tags can be used inside table data tag <td>.
Following is the example of using another table and other tags inside a table cell.


<table border="1">
<tr>
<td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
<td>
<ul>
<li>This is another cell</li>
<li>Using list inside this cell</li>
</ul>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Run



Related Videos