HTML Tables:
- Tables are defined with the <table> tag.
- Table is a set of rows(record).
- Record is a set of columns(fields).
- Table rows can represent with <tr> tag.
- Table columns are called Table data and represents with <td> tag.
- Table headings use <th> tag.
- The HTML Table Element (<table>) represents data in two dimensions.
- The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
- you can also create HTML tables to organize information on your web page.
Simple table representation:
<html>
<body>
<table>
<tr>
<td>Amar</td>
<td>Annie</td>
</tr>
<tr>
<td>Satya</td>
<td>Harin</td>
</tr>
</table>
</body>
</html>
Adding a border, title, and headings:
To basic properties of table format, we can add properties like border, title, and column headings to the table , the table would then resemble the following:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<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>
Table Headers:
- Table heading can be defined using <th> tag.
- This tag will be put to replace <td> tag, which is used to represent actual data cell.
- Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row.
<!DOCTYPE html>
<html>
<head><title>HTML Table Header</title></head>
<body>
<table border="1">
<tr><th>Name</th><th>Salary</th></tr>
<tr><td>Amar</td><td>35000</td></tr>
<tr><td>Annie</td><td>50000</td></tr>
</table>
</body>
</html>