TABLE TAG
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> or <th> tag is used to create data cells. The elements under <td> are regular and left
aligned by default . <th> represents a table header.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr> <th>Table Header 1</th> <th>Table Header 2</th> </tr>
<tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr>
<tr> <td>Row 2, Column 1</td><td>Row 2, Column 2</td> </tr>
</table>
</body>
</html>
You can use the <caption> element to provide a caption/title for your table.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = “2“ color=“red”>
<caption>Table Caption...</caption>
<tr> <th>Table Header 1</th> <th>Table Header 2</th> </tr>
<tr> <td>Cell 1</td> <td>Cell 2</td> </tr>
<tr> <td>Cell 3</td> <td>Cell 4</td> </tr>
</table>
</body>
</html>
You can use the <tbody>, <thead>, and <tfoot> tags to group
table rows, and to add a table header and/or footer.
<table border = "1">
<thead>
<tr><th colspan="2">Table Header (thead)</th></tr>
</thead>
<tfoot>
<tr><th colspan="2">Table Footer (tfoot)</th></tr>
</tfoot>
<tbody>
<tr><td>Cell 1 - part of tbody</td><td>Cell 2 - part of tbody</td></tr>
<tr><td>Cell 3 - part of tbody</td><td>Cell 4 - part of tbody</td></tr>
<tr><td>Cell 5 - part of tbody</td><td>Cell 6 - part of tbody</td></tr>
</tbody>
</table>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will
use rowspan if you want to merge two or more rows.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr> th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr>
<tr> <td rowspan = "2">Row Span-Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell
3</td> </tr>
<tr><td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td></tr>
<tr> <td colspan = "3">Col Span-Row 3 Cell 1</td> </tr>
</table>
</body>
</html>
You can use CSS to apply styles to your tables. You can apply styles against the whole table, the individual elements
inside the table, or both.
In particular, you can drop the border attribute completely and use CSS to define any borders.
<!DOCTYPE html>
<title>Example</title>
<style>
.myTable {
border-collapse:collapse;
}
.myTable th {
background-color:#BDB76B;color:white;
}
.myTable td, .myTable th {
padding:5px;border:1px solid #FF0000;
}
</style>
<table class="myTable">
<tr><th>Table header</th><th>Table header</th><th>Table header</th></tr>
<tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr>
<tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr>
<tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr>
</table>
Tables Backgrounds
You can set table background using one of the following two ways −
bgcolor attribute − You can set background color for whole table or just for one cell.
background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "1.jpg">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Table Height and Width
You can set a table width and height using width and height attributes. You can specify table width or height
in terms of pixels or in terms of percentage of available screen area.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html><head>
<style>
table, th, td {
border: 1px solid black; border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style></head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%">
<tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr>
<tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr>
<tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
<tr> <td>John</td> <td>Doe</td> <td>80</td> </tr>
</table>
<p>Try to change the padding to 5px.</p>
</body></html>
<!DOCTYPE html>
<html><head>
<title>Example of HTML colgroup Tag</title>
<style type="text/css">
table, td, th {
border: 1px solid gray; }
</style></head>
<body>
<table>
<colgroup>
<col style="background-color:gray;">
<col span="2" style="background-color:red;">
</colgroup>
<tr> <th>No.</th> <th>Name</th> <th>Email</th> </tr>
<tr> <td>1</td> <td>John Carter</td> <td>johncarter@mail.com</td>
</tr>
<tr> <td>2</td> <td>Peter Parker</td> <td>peterparker@mail.com</td>
</tr>
<tr> <td>3</td> <td>John Rambo</td> <td>johnrambo@mail.com</td>
</tr>
</table>
</body>
</html>
D:\HTML\table.html
D:\HTML\table7.html
D:\HTMLtable1.html
D:\HTMLtable8.html
D:\HTMLtable2.html
D:\HTMLtable9.html
D:\HTMLtable3.html
D:\HTMLtable10.html
D:\HTMLtable4.html
D:\HTMLtablecolgroup.html
D:\HTMLtable5.html
D:\HTMLtable6.html
