This tag is used to display the data in tabular format. A table is combination of rows. Each row is combination of cells (columns). Each row can contain different no of cells
Attributes of table tag:
- <table>: This attribute specifies the thickness of the border. It is specified in pixels the default value is “0” pixels.
<table> cells(columns) - <width>: This attribute specifies the width of the table.
- <height>: This attribute specifies the height of table.
Note: Width and height can be specified in pixels or percentage - align: This attribute is used to align the table in the web page
align= left/center/right
The default alignment of table is left. - Border color: This attributes specifies color for a border of a table
- Bgcolor: This attribute specifies the background color for a table
- Background: This specified the image as the background to the table.
- Cell Padding: This specifies an empty space cell content and cell border.
- Cell Spacing: This attribute specifies an empty space between table border and cell border and between the cells
Sub tags of <table>:
- <tr> (table row): This tag is used to create a row in a table.
The number of tr tags indicates the number of row in a table - <td> (table data): This tag is used to create access in a particular row.
The number of td tags indicates number of cells or columns in that row. - <th> (table heading): This tag is used to create a cell in a row similar to td tag but <th> will align the text to be the center of the cell and the text will be displayed in bold face.
- <caption>: This tag is used to display an heading to the table.
Attributes of Sub Tags:
- Row Span: This is used to spam (merge) multiple cells into a single cell vertically.
- Col Span: This attribute is used to spam the (merge) multiple cells into a single cell horizontally.
- Vertical Align (valign):This attribute is used to align the text in a cell vertically.
valign= top/middle/bottom
default value is middle
In addition to above attributes we cam also use align, bgcolor, background, width, height.
Example :
<table>
<html>
<head>
<title> Using Tables </title>
</head>
<body>
<table border= 2 width= 400 height= 400 border color= red background= “Smile.jpeg” align= center cellpadding= 20 cellspacing= 20>
<caption> Number Table </caption>
<tr>
<th> one </th>
<th> two </th>
<th> three </th>
</tr >
<tr>
<td colspan= 2> four </td>
<td rowspan= 2> five </td>
</tr>
<tr>
<td align= center valign= top> six </td>
<td> seven </td>
</tr>
</table>
</body>
</html>