Tables are used in web pages to present the information in a more useful way. Information about lists, calendar, mark sheets, product catalogue etc. can be easily provided with the help of HTML tables. Tables make it easy for the user to identify the relevant information quickly. If you want to put some details category wise, then tables are the best choice. HTML tables can be created in various designs, sizes, patterns and colors, but there are some common attributes which forms the basic structure of any table. Table can be inserted in HTML using <TABLE>….</TABLE> tags.
The basic elements of TABLE are:
1) TR (Table Row): It is used to enter rows in a table
2) TD(Table Data): It is used to enter data in the table
3) TH (Table Header): It is used to give headings in the table
4) CAPTION: It is used to give a caption to the table
Below is a HTML code used to create a simple table:
<HTML>
<TABLE>
<CAPTION>Content Mantra</CAPTION>
<TR><TH>Sn.no</TH><TH>Services</TH><TH>URL</TH></TR>
<TR><TD>1</TD><TD> Blogs </TD><TD>mantrablogs.com</TD></TR>
<TR><TD>2</TD><TD>Content writing </TD><TD> contentmantra.com</TD></TR>
<TR><TD>3</TD><TD>Resume writing</TD><TD>contentmantra.com</TD></TR>
<TR><TD>4</TD><TD>E-book</TD><TD>contentmantra.com</TD></TR>
</TABLE>
</HTML>
The output of the above code is as follows:
| Sn.no | Services | URL |
|---|---|---|
| 1 | Blogs | mantrablogs.com |
| 2 | Content writing | contentmantra.com |
| 3 | Resume writing | contentmantra.com |
| 4 | E-book | contentmantra.com |
By default the TH element is marked as ‘Bold’ and it is aligned towards the center and the TD elements are aligned towards the left. Apart form the simple tables you can also create the complex ones having attractive layout and design. Different attributes which are commonly used to design and format the tables are:
1) Align: It is used to set the horizontal position of the table (not its contents). The values used with align are bleedleft, bleedright, center, justify, left and right. If Align is used with the TD and TH elements, then it will affect the contents of the table.
2) Border: This attribute is used to design a border for the table. The thickness of the table can be adjusted with the help of integers.
3) Cellpadding: This attribute is used to give spacing between the cells if a table.
4) Cellspacing: It is used to give spacing between the cells and the data contained in the cells of the table.
5) Width: It is used to define the overall width of the table.
6) Colspan: It is used with the TD and TH elements to specify the number of columns the cell spans.
7) Rowspan: Used with TH and TD to specify the number of rows the cell spans.
No wrap: The contents of the cells are not wrapped. It is also used with TD and TH
9) Valign: Used with TD and TH in order to define the vertical alignment of data within a cell. The possible values which can be used with Valign are top, middle and bottom.
HTML code for a Table using different attributes:
<HTML>
<TABLE border=”2” cellpadding=”3 cellspacing=”3”>
<CAPTION>Content Mantra</CAPTION>
<TR><TH>Sn.no</TH><TH>Services</TH><TH>URL</TH></TR>
<TR><TD Align=”center” >1</TD><TD Align=”center”> Blogs </TD><TD Align=”center”>mantrablogs.com</TD></TR>
<TR><TD Align=”center”>2</TD><TD Align=”center”>Content writing </TD><TD Align=”center”> contentmantra.com</TD></TR>
<TR><TD Align=”center”>3</TD><TD Align=”center”>Resume writing</TD><TD Align=”center”>contentmantra.com</TD></TR>
<TR>
4</TD><TD Align=”center”>E-book</TD><TD Align=”center”>contentmantra.com</TD></TR>
</TABLE>
</HTML>
Output of the above code:
| Sn.no | Services | URL |
|---|---|---|
| 1 | Blogs | mantrablogs.com |
| 2 | Content writing | contentmantra.com |
| 3 | Resume writing | contentmantra.com |
| 4 | E-book | contentmantra.com |