HTML Tables

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The <td> element is the data containers of the table which can any HTML elements like text, images, lists, other tables, etc.

HTML Table - Defining Width

By default, the table will occupy spacing depending upon the total width that is covered by the cell contents. We can define the width of the table using CSS property width or adding width attribute to the table like width="500" or width="50%".

HTML Table - Example

<table>
	<tr>
		<th>Name</th>
		<th>Age</th> 
		<th>gender</th>
	</tr>
	<tr>
		<td>James</td>
		<td>32</td> 
		<td>Male</td>
	</tr>
	<tr>
		<td>Siara</td>
		<td>24</td> 
		<td>Female</td>
	</tr>
</table>

Name	Age	gender
James	32	Male
Siara	24	Female

HTML Table - Border

Border is not displayed in and around the table and cells by default. You need to set it using CSS or adding attribute border="1" to the table where 1 is the number of border around each cell.

<style>
table, th, td {
  border: 1px solid black;
}
</style>

HTML Table - Collapsed Borders

By default, cell borders have a spacing of 1 pixel to each other. You can collapse the borders of table, tr, th or td into one using CSS border-collapse property and turn them into single border.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

HTML Table - Cell Padding

By default, contents inside a <td> cell are displayed attached to the left border of the cell. You can use CSS property padding to define spacing between the table cell contents and their borders and make the table look more visually appealing.

<style>
th, td {
  padding: 15px;
}
</style>

HTML Table - Left-align Headings

By default, contents inside the table headings <th> are displayed bold and centered. You can align them to the left of the cell using CSS property text-align.

<style>
th {
  text-align: left;
}
</style>

HTML Table - Border Spacing

You can use CSS property border-spacing to define spacing between the cells inside a table. This css property will only work if cell borders are not collapsed.

<style>
table {
  border-spacing: 5px;
}
</style>

HTML Table - colspan Attribute

The colspan attribute is added to a table cell to make it occupy more than one column in a row.

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <td>James Mathews</td>
    <td>6357957412</td>
    <td>2147597536</td>
  </tr>
</table>

Name	Contacts
James Mathews	6357957412	2147597536

HTML Table - rowspan Attribute

The rowspan attribute is added to a table cell to make it occupy more than one row.

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>James Mathews</td>
  </tr>
  <tr>
    <th rowspan="2">Contacts:</th>
    <td>6357957412</td>
  </tr>
  <tr>
    <td>2147597536</td>
  </tr>
</table>

Name:	James Mathews
Contacts:	6357957412
Contacts:	2147597536

HTML Table - Caption

You can use the <caption> to add caption to a table. The <caption> must be placed right after the opening <table> tag.

<table style="width:100%">
  <caption>Employees</caption>
  <tr>
    <th>Name</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>James</td>
    <td>2017</td>
  </tr>
  <tr>
    <td>Siara</td>
    <td>2019</td>
  </tr>
</table>

Employees
Name	Year
James	2017
Siara	2019

Adding CSS Style to a Specific Table

To style a table and make it unique from others, you can add a class or an id attribute to the table and then style it using CSS.

Firstname	Lastname	Age
Amy	Jackson	37

<table id="uniqueTable">
  <thead>
    <tr>
     <th>Firstname</th>
     <th>Lastname</th> 
     <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td>Amy</td>
     <td>Jackson</td> 
     <td>37</td>
    </tr>
  </tbody>
</table>

<style>
#uniqueTable {
  width: 100%; 
  background: lightcyan;
  margin-bottom: 10px;
}
#uniqueTable th {
  background: darkgrey;
  color:white;
}
#uniqueTable th, #uniqueTable td{
  padding: 5px 10px;
}
</style>

Moreover, you can use <thead>, <tbody> and <tfoot> to group header, body and footer contents within a table.

Nested Table

You can create a table inside another table and then create miltiple rows and columns inside it.

<table width="100%" border="1">
	<tr>
		<td>This is a normal cell inside a table.</td>
		<td>This is a normal cell inside a table.</td>
	</tr>
	<tr>
		<td>This is a normal cell inside a table.</td>
		<td>
		    <table width="100%">
			    <tr>
			    	<td>Nested table row 1 column 1</td>
			    	<td>Nested table row 1 column 2</td>
			    </tr>
			    <tr>
			    	<td>Nested table row 2 column 1</td>
			    	<td>Nested table row 2 column 2</td>
			    </tr>
		    </table>
		</td>
	</tr>
</table>

This is a normal cell inside a table.

Nested table row 1 column 1	Nested table row 1 column 2
Nested table row 2 column 1	Nested table row 2 column 2

0 Like 0 Dislike 0 Comment Share Tweet