HTML Tables

HTML Tables: In this tutorial, we are going to learn about the tables in HTML, with their attributes.
Submitted by Jhanvi Tripathi, on July 25, 2019

A table is a set of rows and columns, which could be created on a webpage in HTML, by <table> tag. The tabular representation of complex data makes it readable.

The <table> tag if followed by another tag <th> which specifies the table heading, the <tr> tag defines the table row and the <td> tag holds the table data.

The below code is a sample code to create a table in HTML.

<html>

<body>
	<table>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>City</th>
		</tr>
		<tr>
			<td>Shivang</td>
			<td>21</td>
			<td>Indore</td>
		</tr>		
		<tr>
			<td>Amit</td>
			<td>22</td>
			<td>Gwalior</td>
		</tr>
	</table>	
</body>

</html>

Output

Additionally, a table name could be assigned to the table by the <caption> element. The <caption> tag is to be inserted immediately after the <table> tag. Although the use of the caption element is completely optional for the table.

<html>

<body>
	<table border>
		<caption>Student Record</caption>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>City</th>
		</tr>
		<tr>
			<td>Shivang</td>
			<td>21</td>
			<td>Indore</td>
		</tr>		
		<tr>
			<td>Amit</td>
			<td>22</td>
			<td>Gwalior</td>
		</tr>
	</table>	
</body>

</html>

Output

The <table> tag has attributes which can alter the table representation. The border of the table, the alignment of the content of data in the table is some of them.

Common attributes of <table> tag

align: The align attribute specifies the alignment of the table. The values which could be given to the align attribute are left, right or center.

<table align="right">

border: By default, the <table> tag applies no border to the table. Thus the border attribute is used to specify the width of the table border. This width could be given in either pixel or percentage.

<table border="10px">

bordercolor: This attribute is used to provide a color to the border. The name or the hex code of the color is provided to this attribute to apply color to the border.

<table bordercolor="#0000ff">

width: The width attribute specifies the table width. The value of this attribute is similar to the border as could be given in pixels or percentage form.

<table width="100%">

bgcolor: This attribute is used to apply color to the table. The name of the color or the hex-code is to be mentioned to this property. A hex-code of the color is the color code which is defined by the combination in the RGB system.

<table bgcolor="#000066">

An example with attributes

<html>

<body>
	<table border="2px" width="80%" bordercolor="#006969" bgcolor="yellow" align="center">
		<caption>Student Record</caption>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>City</th>
		</tr>
		<tr>
			<td>Shivang</td>
			<td>21</td>
			<td>Indore</td>
		</tr>		
		<tr>
			<td>Amit</td>
			<td>22</td>
			<td>Gwalior</td>
		</tr>
	</table>	
</body>

</html>

Output

The CSS files also could be used for styling the table and adding more design and layouts to the table and providing the responsiveness to the table simultaneously.

Some commonly used CSS properties of a table are,

border
border-collapse
padding
text-align

Example of table with CSS

<html>

<body>
<style>
	table {
		border: solid 2px black; 
		border-collapse: collapse;
		padding: 10px;
		text-align : center;
	}
</style>
	<table width="80%" bordercolor="#006969" bgcolor="yellow">
		<caption>Student Record</caption>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>City</th>
		</tr>
		<tr>
			<td>Shivang</td>
			<td>21</td>
			<td>Indore</td>
		</tr>		
		<tr>
			<td>Amit</td>
			<td>22</td>
			<td>Gwalior</td>
		</tr>
	</table>	
</body>

</html>

Output

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples