HTML Tables
HTML Tables
HTML tables can be used to display data in rows and columns. Tables are created using the <table> tag, which contains one or more <tr> tags (table rows) and each row contains one or more <td> tags (table data/cells).
Here’s an example of a basic table in HTML:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>Welcome to my HTML page</h1>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",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>
In this example, the <table> tag is used to create a table. The table contains two rows, each with two columns. The data in each cell is specified using the <td> tag.
Tables can also be formatted using attributes such as border, cell padding, and cell spacing to control the border, padding, and spacing of the table and its cells. Additionally, tables can be styled using CSS to change the appearance of the table and its contents.
Here’s an example of a table with some formatting applied:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Welcome to my HTML page</h1>
<table>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Product A</td>
<td>$10.00</td>
<td>5</td>
</tr>
<tr>
<td>Product B</td>
<td>$15.00</td>
<td>3</td>
</tr>
</table>
</body>
</html>
In this example, the table is given a border and the cell padding and spacing are specified using CSS. Additionally, the table header is given a background color and bold font weight to make it stand out.