HTML Tables

<table> tag is used to define table in HTML

Example

<table style="width:100%" border="1">
<tr>
<th>Heading1</th>
<th>Headinng2</th>
</tr>
<tr>
<td>Cell1</td>
<td>Cell2</td>
</tr>

</table>

<tr> tag is used for define table row. <th> tag is usd for define table header and <td> tag is used for define table cell.

Colspan and Rowspan

If you want to merge two or more columns into a single column used colspan attribute and if you want to merge two or more rows used rowspan.

Example

<!DOCTYPE html>
<html>
<head>
<title>Title/title>
</head>
<body>
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr><td rowspan="2">First Row Cell 1</td><td>First Row Cell 2</td><td>First RowCell 3</td></tr>
<tr><td>Second Row Cell 2</td><td>Second Row Cell 3</td></tr>
<tr><td colspan="3">Third Row Cell 1</td></tr>
</table>
</body>
</html>

Cellpadding and Cellspacing
Cellpadding and cellspacing are two attribiutes in table which are used to adjust the white space in table cells. The cellspacing attribute defines the width of the border and for distance between cell borders and the content within cell used cellpadding attribute.

Example

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Rollno</th>
</tr>
<tr>
<td>Amit</td>
<td>50</td>
</tr>
<tr>
<td>Rahul</td>
<td>70</td>
</tr>
</table>
</body>
</html>

Height and Width
For set the table width and height used width and height attrubutes. You can specify the width or height of table using pixels or percentage of available screen area.

Example

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<table border="1" width="100" height="100">
<tr>
<td>Heading 1</td>
<td>Heading2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
</body>
</html>

Table Header, Body, and Footer
By using header, body, and foot tables can be divided in three parts.
<thead> : Is used to create a separate table header.
<tbody> : Is used to the main body of the table.
<tfoot> : Is used to separate table footer.
Example

<!DOCTYPE html>
<html>
<head>
<title>Title/title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">Table Head Here</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Table Foot Here</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</body>
</html>

Leave a Reply

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