webdevlinux - logo Web Dev Linux

HTML Tables

With this chapter, you will understand the basics of HTML tables. You can make any kinds of tables with HTML.

HTML Tables HTML table elements

Try the very simple example given below to understand the basics of HTML tables. This table contains two rows and three columns.

FILE : tables.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Tables</title>
</head>
<body>
 <table border="1">
	<caption>Table Caption</caption>
	<tr>
		<td>row1 column1</td>	
		<td>row1 column2</td>	
		<td>row1 column3</td>	
	</tr>
	<tr>
		<td>row2 column1</td>	
		<td>row2 column2</td>	
		<td>row2 column3</td>	
	</tr>
 </table>
</body>
</html>

Explanation

Take a look at the explanation of elements & the attribute used in the example.

<table></table>
The table element represents a HTML table
<tr></tr>
The tr element represents a table row
<td></td>
The td element represents a table data or table cell.
<caption></caption>
When we want a caption or title for the table, We can use the caption element .
border="1"
We use this attribute to set table border with 1px width. Without this attribute, the table will display no borders.
With the CSS, we can set a customized border on HTML tables.