• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

HTML Table Tags

Table

Table are very useful to arrange in HTML and they are used very frequently by almost all we developers.Tables are just like spreadsheets and they are made up of rows and columns.

You will 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 stands for table row .And each cell is then written inside the row element using a <td> tag.which stands for table data.

Example of HTML Table

<table border=”1”>

<tr>

<td> Row 1, column 1</td>

<tr><td> Row 1, column 2</td>

</tr>

<tr>

<td> Row 2, column 1</td>

<td> Row 2, column 2</td>

</tr>

</table>

This will produce following result:

Row1,Column1Row 1, column 2
Row 2, column 1Row 2, column 2

Note: In the above example border is an attribute of <tabel> and it will put border across all the cells. If you do not need a border then you cal use border=”0”.The border attribute and other attributes also mentioned  in this session are deprecated and they have been repalced by CSS. So it recommended to use CSS instead os 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> Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td> Shabbir Hussein</td>

<td>7000</td>

</tr>

</table>

This will produce following result. You can see its making heading as a bold one:

NameSalary
Ramesh Raman5000
Shabbir Hussein7000

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 Cell padding and Cell spacing:

There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cell.Cell spacing defines the width of the border,while cellpadding represents the distance betwenn cell borders and the content with in.Following is the example:

<table border=”1” cell padding=”5” cellspacing=”5”>

<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>

This will produce following result

NameSalary
Ramesh Raman5000
Shabbir Hussein7000

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similiar way you will use rowspan 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 Cell1</td>

<td> Row 1 Cell1</td><td> Row 1 Cell3</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>

This will produce following result

Screenshot_84

Tables Backgrounds

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

  • Using bgcolor attribute –You can set background color for whole table or just for one cell.
  • Using background attribute- You can set background image for whole table or just for one 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 bg color =”red” > Row 1 Cell2</td><td> Row 1 Cell3</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>

This will produce following result:

Screenshot_85

Tables Back grounds

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

  • Using bgcolor attribute –You can set background color for whole table or just for one cell.
  • Using background attribute- You can set background image for whole table or just for one cell.

Note: You can set border color also using bordercolor attribute.

Here is an example of using bgcolor attribute:

<table border=”5” border color=”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>

This will produce following result:

 Screenshot_86

Here is an example of using background attribute:

<table border=”1” background =”/images/home.gif”>

<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” background=”/images/pattern1.gif”>Row 3 Cell 1</td></tr>

</table>

This will produce following result:

Screenshot_87

Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or height 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>

This will produce following result:

Screenshot_88

<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>

This will produce following result:

Screenshot_89

Summary
Review Date
Reviewed Item
HTML Table Tags
Author Rating
4

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on HTML Table Tags"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.