How to create a table in HTML

problem

You wish to add a table in your HTML page. This post shows how to create a simple table with couple of rows and columns.

SOLUTION

In HTML, we can use the <table> tag to specify an element that will be table. Tables are usually for tabular data. The opening table tag needs to be followed by a closing tag as shown below.

				
					<table>
    
</table>

adding header

Most of the tables use the first row as headers. We can accomplish this by using the <thead> tag. Inside the thead we will add a table row by using the <tr> tag and inside that we will add 2 columns (table headers) by using the <th> tag.

				
					<table>
			<thead>
				<tr>
					<th>column 1</th>
					<th>column 2</th>
				</tr>	
			</thead>
		</table>

adding body

Now, let’s add the contents of the table by using the <tbody> tag. Inside that we will add 3 rows again by using the <tr> tag and in each row we will add 2 cells by using the table data tag <td>

				
						<table>
			<thead>
				<tr>
					<th>column 1</th>
					<th>column 2</th>
				</tr>	
			</thead>
			<tbody>
				<tr>
					<td>cell 1</td>
					<td>cell 2</td>
				</tr>
				<tr>
					<td>cell 3</td>
					<td>cell 4</td>
				</tr>
			</tbody>
		</table>

output

The data are shown in a tabular format as expected. Of course if we wish to style it with some borders and colors we will need to add CSS.

For example adding the following CSS will add two different background colors on the table

				
					tr{
				background-color: lightskyblue;
			}
			th{
				background-color: lightgreen;
			}

For simplicity the CSS can be added inside the <style> tag that goes inside the <head> tag as shown below. Recall we can specify CSS on our HTML in 3 different ways.

				
						<head>
		<style>
			tr{
				background-color: lightskyblue;
			}
			th{
				background-color: lightgreen;
			}
		</style>
	</head>

The <head> always appears first in HTML, before <body>. Below is the complete HTML

				
					<html>
	<head>
		<style>
			tr{
				background-color: lightskyblue;
			}
			th{
				background-color: lightgreen;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>column 1</th>
					<th>column 2</th>
				</tr>	
			</thead>
			<tbody>
				<tr>
					<td>cell 1</td>
					<td>cell 2</td>
				</tr>
				<tr>
					<td>cell 3</td>
					<td>cell 4</td>
				</tr>
			</tbody>
		</table>
	<script>var rocket_beacon_data = {"ajax_url":"https:\/\/programmerabroad.com\/wp-admin\/admin-ajax.php","nonce":"67b98b633c","url":"https:\/\/programmerabroad.com\/how-to-create-a-table-in-html","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"lrc":true},"lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://programmerabroad.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

conclusion

In this post we saw how to create a simple table with two columns and two rows. Tables are widely used.

references

MDN <table>: The table element

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

0 0 votes

Article Rating