top of page
Search

HTML Lecture 09 - HTML Tables

  • Writer: Alex Wright
    Alex Wright
  • Oct 16, 2020
  • 2 min read

Updated: Jul 1, 2022


HTML table is defined by a tag <table>. Each table row is defined by the tag <tr> and each data/cell is defined by <td>. We can also use <th> to define the first row of the table as it represents the header of the column. Let's write a simple code:


<!DOCTYPE html>
<html>
<head>
<title>Lecture 09</title>
</head>
<body>

<h1 style="text-align:center">Lecture 09</h1>

<table style="width:100%; text-align:center">
<caption>Employee Table</caption>
	<tr>
		<th>Name</th>
		<th>Age</th>
		<th>Gender</th>
	</tr>
	
	<tr>
		<td>John</td>
		<td>28</td>
		<td>Male</td>
	</tr>
	
	<tr>
		<td>Amy</td>
		<td>25</td>
		<td>Female</td>
	</tr>
	
	<tr>
		<td>Kate</td>
		<td>26</td>
		<td>Female</td>
	</tr>
	
	<tr>
		<td>Peter</td>
		<td>30</td>
		<td>Male</td>
	</tr>

</table>

</body>
</html>

The result:

This is an example of a simple table, we have used an additional tag named <caption> which defines the caption of the table.


HTML Table - CSS


The above table is easy to read for now but what if we have more columns say 10, then it will be difficult to read from the table. For this purpose, we are going to use CSS on this table to add some borders. The rest of the code will be the same the only thing added to the previous code is a style element inside the head element. Let's have a look at the below code. 


<style>
table, th, td {
  border: 1px solid black;
  padding: 10px;
  border-spacing: 3px;
}
th {
  color: white;
  background-color: black;
}
tr:nth-child(even) {
  background-color: #eef;
}
tr:nth-child(odd) {
  background-color: #ffe;
}
</style>

The result after applying CSS style to the table:

It looks much better now, right? We have used the 'border' property to add a border to the table. The 'padding' property is used to increase the distance between the text and the border around the text (you will learn this property in detail in CSS lectures). The 'border-spacing' property is used here to increase the distance between each cell. The 'nth-child()' is a CSS property to target a specific child element (you will learn this property in detail in CSS lectures).


HTML Table - Cell Span


There are two types of span used in the HTML Table. We use <colspan> to make a cell span more than one column and we use <rowspan> to make a cell span more than one row. Let's slightly change our employee table code and apply this Cell Span.


<!DOCTYPE html>
<html>
<head>
<title>Lecture 09</title>
<style>
table, th, td {
  border: 1px solid black;
  padding: 10px;
  border-spacing: 3px;
}
th {
  color: white;
  background-color: black;
}
tr:nth-child(even) {
  background-color: #eef;
}
tr:nth-child(odd) {
  background-color: #ffe;
}
</style>
</head>
<body>

<h1 style="text-align:center">Lecture 09</h1>

<table style="width:100%; text-align:center">
<caption>Employee Table (with colspan)</caption>
	<tr>
		<th>Name</th>
		<th colspan="2">Telephone</th>
	</tr>
	
	<tr>
		<td>John</td>
		<td>1234567890</td>
		<td>1234567891</td>
	</tr>
	
	<tr>
		<td>Amy</td>
		<td>1234567892</td>
		<td>1234567893</td>
	</tr>
	
	<tr>
		<td>Kate</td>
		<td>1234567894</td>
		<td>1234567895</td>
	</tr>
	
	<tr>
		<td>Peter</td>
		<td>1234567896</td>
		<td>1234567897</td>
	</tr>

</table>
<br><br><br>
<table style="width:100%; text-align:center">
<caption>Employee Table (with rowspan)</caption>

	<tr>
		<th>Name</th>
		<td>John</td>
		<td>Amy</td>
		<td>Kate</td>
		<td>Peter</td>
	</tr>
	<tr>
		<th rowspan="2">Telephone</th>
		<td>1234567890</td>
		<td>1234567892</td>
		<td>1234567894</td>
		<td>1234567896</td>
	</tr>
	
	<tr>
		<td>1234567891</td>
		<td>1234567893</td>
		<td>1234567895</td>
		<td>1234567897</td>
	</tr>

</table>

</body>
</html>

The result:

So now, we are using employee name and their phone numbers in the above example. The first example shows the effect of colspan where the heading 'Telephone spanned to two columns. The second example shows the effect of rowspan where the heading 'Telephone" spanned two rows. Try these examples yourself and create some cool useful tables.

Comments

bottom of page