HTML tables


HTML tables allow web designers to store and show data in tabular form.Links can also be added in HTML tables.
HTML tables start with <table> and ends with </table> tag.Here <tr> tag is used to create table rows and <td> tag is used to fill table data.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
HTML TABLES
</title>
</head>
<body>
<table style="width:100%">
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>
Set table width as 100% to set table in browser screen.If width is not mentioned then table will not be displayed correctly.Try one example having same code but remove style element.

Output:

ANKIT 8981324446
ASHUTOSH 9051320061

Table borders in HTML

In above example you saw that there is no border in table.We can add borders according to our choice see next example.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
HTML TABLES
</title>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>
In the above coding there is just a mentioning of border which is set equls to 1 and entire coding is same.See the effect in output.

Output:

ANKIT 8981324446
ASHUTOSH 9051320061

Adding table borders using CSS in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
}
</style>
<title>
HTML TABLES
</title>
</head>
<body>
<table style="width:100%">
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

ANKIT 8981324446
ASHUTOSH 9051320061

HTML tables with cell padding

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
}
th,td{
padding:16px;
}
</style>
<title>
HTML TABLES
</title>
</head>
<body>
<table style="width:100%">
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

ANKIT 8981324446
ASHUTOSH 9051320061

Headings in HTML table

<th> tag is used to give headings to HTML table.

Exercise:

<!DOCTYPE html>
<html>
<head>
<title>
HTML TABLES
</title>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<th>NAME</th>
<th>NUMBER</th>
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061

Text alignment in HTML tables

Text alignment in HTML can be simply done using text-align attribute.See the example given velow.

Exercise:

<!DOCTYPE html>
<html>
<head>
<title>
HTML TABLES
</title>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<th style="text-align:center">NAME</th>
<th style="text-align:center">NUMBER</th>
<tr>
<td style="text-align:left">ANKIT</td>
<td style="text-align:right">8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061

Border spacing in HTML table

Syntax:

  • table{
    border-spacing: 5px;
    }

Captions in HTML tables

We can simply add captions to HTML tables by adding <caption> tag after <table> tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
HTML TABLES
</title>
</head>
<body>
<table border="1" style="width:100%">
<caption>INFORMATION
</caption>
<tr>
<th>NAME</th>
<th>NUMBER</th>
<tr>
<td>ANKIT</td>
<td>8981324446</td>
</tr>
<tr>
<td>ASHUTOSH</td>
<td>9051320061</td>
</tr>
</table>
</body>
</html>

Output:

INFORMATION
NAME NUMBER
ANKIT 8981324446
ASHUTOSH 9051320061