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>var rocket_lcp_data = {"ajax_url":"https:\/\/programmerabroad.com\/wp-admin\/admin-ajax.php","nonce":"da148c0695","url":"https:\/\/programmerabroad.com\/how-to-create-a-table-in-html","is_mobile":false,"elements":"img, video, picture, p, main, div, li, svg, section, header","width_threshold":1600,"height_threshold":700,"delay":500,"debug":null}</script><script data-name="wpr-lcp-beacon" src='https://programmerabroad.com/wp-content/plugins/wp-rocket/assets/js/lcp-beacon.min.js' async></script><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!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪