Posted on by jyoti

Introduction to HTML Tables

HTML Tables

You use tables to represent any data in a structured form. By adding tables to your webpage, you can make it even more structured toward it.

To create tables in HTML, you use <table> tags. This tag has a sub tag called <tr> table row tag. <tr> tag also has a sub tag called <td> table data tag.

CREATING TABLES IN HTML

Any table is made of row and columns. Therefore, to create a row after <table> tag, you use <tr> tag. The more you want to create the rows, define the same <tr> tag.

After creating rows you create columns in rows. The <td> tag is used to create columns. You define as many tags as you want to create <td> tags.

To create a table, you should always keep in mind the tag order. First comes the <table> tag. After this comes the <tr> tag. Then there comes <th> and <td> tags. <th> and <td> tags will always come in <tr> tags.

CREATING TABLE WITH HEADINGS

<!DOCTYPE html>
<html>
<head>
<title>Table Heading Page</title>
</head>
<body>
<table border="1">
<tr><th>Names</th>
<th>Age</th> </tr> 
<tr> <td>Jack</td>
<td>25</td></tr>
<tr><td>Rocky</td>
<td>35</td></tr>
</table>
</body>
</html>

COLSPAN ATTRIBUTE USING

<!DOCTYPE html>
<html>
<head>
<title>Colspan WebPage </title>
</head>
<body>
<table border="1">
<tr><th>Names</th>
<th colspan ="2">Mobile No.</th></tr> 
<tr><td>Charlie</td> 
<td>3254769832</td>
<td>123</td></tr>
<tr><td>Jack</td>
<td colspan ="2">3254769832</td></tr>
</table>
</body>
</html>

ROWSPAN ATTRIBUTE USING

<!DOCTYPE html>
<html>
<head>
<title> Rowspan Webpage </title>
</head>
<body>
<table border="1">
<tr><th rowspan="2">Colors</th>
<td>Yellow</td></tr>
<tr><td>Green</td></tr>
<tr><th rowspan="2">Blue</th>
<td></td></tr>
<tr><td>www</td></tr>
</table>
</body>
</html>