HTML Tables
HTML tables allow to arrange information into rows and columns.
Define an HTML Table
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
Example
A simple HTML table:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Table With Border</h2>
<table 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>
</body>
</html>The property width=100% will expand the table 100% of the window size
Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table – Add a Border
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Table With Border</h2>
<table width="100%" border="1">
<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>
</body>
</html>
HTML Table – Add Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table width="100%" border="1" cellpadding="5" cellspacing="6">
<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>
</body>
</html>
HTML Table – Cell that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table width="100%" border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Tommy</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
HTML Table – Cell that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table width="100%" border="1">
<tr>
<th>Name:</th>
<td>Simple man</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9890564345</td>
</tr>
<tr>
<td>9865342321</td>
</tr>
</table>
</body>
</html>
HTML Table – Add a Caption
To add a caption to a table, use the tag:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<table width="100%" border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>Rs. 100</td>
</tr>
<tr>
<td>February</td>
<td>Rs. 50</td>
</tr>
</table>
</body>
</html>
Note:The
<caption>tag must be inserted immediately after the<table>tag.
The various attributes used with the table can be replaced with CSS as follows
| width | width=”100%” | style=”width:100%” |
| border | border=”1″ | table, th, td { border: 1px solid black; } |
| cellpadding | cellpadding=”5″ | th, td { padding: 5px; } |
| cellspacing | cellspacing=”10″ | th, td { border-spacing:10px; } |
Lets see a combined example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-spacing:10px;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<h2>Table With Border applying css styles </h2>
<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>
</body>
</html>Refer the following video for more assistance