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></style>
	</head>
				
			

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

				
					<html>
	<head>
		<style></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>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</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

Share it!

Facebook
Twitter
LinkedIn
Reddit
Picture of Ellion

Ellion

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

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x