HTML table

Previous
Next

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>
Previous
Next

Courses Enquiry Form