HTML Tables:

 

<table> </table> tags <caption> tag <tr> tag <th> & <td> tags Html Table example

Let us start with the html tags used for creating tables.
(1)To create a table use <table> and </table> tags.

(2)To add a title to your table, <caption> and  </caption> tags are used.

(3)To start a new row use <tr> and </tr> tags.

(4)To enter information in a cell,  <td>  and </td> tags are used.

(5)To insert headings in a table, <th> and  </th> tags are used.

Let us create a very simple table.
<table>
<tr>
<td>my first table</td>
</tr>
</table>

Attributes of the <table> tag

The following is the complete syntax or general format for creating a table :
<table border=b bordercolor=bc align=center width=w% height=h% cellpadding=x cellspacing=x bgcolor=color>

border= Specifies the size of border
bordercolor= specifies the color of the border using either their rgb value or one of the set ones.

align= can be set to left, right or center and specifies where the table will appear on the browser  window.

width= can be set in pixels or as a percentage of the browser window.

height= can be set in pixels or as a percentage of the browser window.

cellpadding= set in pixels. Specifies the space within each cell in which nothing will appear.

cellspacing= set in pixels, specifies the amount of blank space in between each cell

bgcolor= sets the background color of the table, once again use either the rgb value of the color or one of the set colors.

Attributes of the <caption> tag
This tag is used to create a caption for a table.

<caption align=top or bottom>

Attributes of the <tr> tag
This tag is used to create a new row in a table.

The following is the general format for <tr> tag:

<tr align=right valign=bottom bgcolor=blue bordercolor=yellow>

align= can be set to left, right or center. Specifies the alignment of text in each cell of that row
valign= can be set to top, bottom or center. Specifies the vertical alignment of text in each cell of that row

bgcolor= the same as the bgcolor attribute of the <table> tag except that this sets only the color for that row

bordercolor= the same as the bordercolor attribute of the <table> tag except that this sets only the color for that row

Attributes of the <th> and <td> tags
<th> tags are used to insert headings into a table.

<td> tags are used to create a new columns or cells in a table.

<Td> and <th> tags have the same attributes. See the following.

<Td align=right valign=top bgcolor=green bordercolor=black height=50 width=100 colspan=2 rowspan=3>

align= is the same as the attribute in the <tr> tag except that it effects only that cell
valign= is the same as the attribute in the <tr> tag except that it effects only that cell

bgcolor= is the same as the attribute in the <tr> cell except that it effects only that cell

bordercolor= is the same as the attribute in the <tr> tag except that it effects only that cell

height= is set in pixels and sets the height of the cell

width= is set in pixels and sets the width of the cell

colspan= is set to a number and sets the number of columns that cell will span

rowspan= is set to a number and sets the number of rows that that cell will span.

The rowspan and colspan are used for creating table with different cell width .

Eg: A Complete example

<html>
<head>

<title>Table Alignment</title>

</head>

<body >

<TABLE WIDTH=”50%” HEIGHT=”50%” CELLPADDING=”1″ CELLSPACING=”5″ BORDER=”1″ ALIGN=”middle”>

<CAPTION>This is Table Caption</CAPTION>

<TR>
<TD COLSPAN=”2″ ALIGN=”middle”  VALIGN=”middle” bgcolor=yellow> Top Row </TD>

</TR>

<TR>

<TD ALIGN=”middle” VALIGN=”middle” bgcolor=gold> Number 1 </TD>

<TD ALIGN=”middle” VALIGN=”middle” bgcolor=gold> Number 2 </TD>

</TR>

<TR>

<TD COLSPAN=”2″ ALIGN=”middle” VALIGN=”middle” bgcolor=yellow> Bottom Row </TD>

</TR>

</TABLE>

</body>

</html>

 

This is Table Caption
Top Row 
Number 1  Number 2 
Bottom Row 

 

Leave a Comment