The HTML table structure
Whether you are creating a simple table or plan to beautify it with custom CSS, Bootstrap CSS, or some other plug-ins, the base structure of a table starts with an HTML <table> tag.
This is followed by using the table rows, table headings, table data and table footer tags.
A basic table structure may look like this:
<table> <tr> <th>Table heading</th> </tr> <tr> <td>Table data</td> </tr> </table>
In this tutorial, I will show you a basic table with headings and table data followed by adding CSS and CSS 3 properties to style and beautify it.
I will also show a few examples of using latest ways like Bootstrap Framework to create tables that are advanced and easy to create.
Let me start step by step; first a little introduction about tables (for readers who are beginners).
A basic table example without any style
To create a table of HTML requires using the table tag as follows:
<table> ….. </table>
In between the opening and closing tags, the table contains table heading and data by using <tr>, <th> and <td> tags.
See a simple example:
In the above figure, you can see two tables. One with a border and another without a border.
The markup:
<table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Quality</th> <th>Quantity</th> </tr> <tr> <td>1</td> <td>Wheat</td> <td>Good</td> <td>200 Bags</td> </tr> <tr> <td>2</td> <td>Rice</td> <td>Good</td> <td>250 Bags</td> <tr> <td>3</td> <td>Sugar</td> <td>Good</td> <td>200 Bags</td> </tr> </table>
The only difference in the code of the two tables is just:
This is used in the first table. I have used the border attribute in table tag for demonstration only. This property is deprecated in HTML 5 version, which is replaced with CSS properties (demos coming up).
The table contains four rows. Out of these four, one is heading and other three are table data.
After the opening tag of the table, <table>, the table row tag is used:
<table> <tr></tr>
The <tr> tag may contain table headings (as first row is showing) by using the <th>..</th> tags.
<table> <tr> <th>Table heading</th> </tr> </table>
You may use as many <th> inside the <tr> tag as you need. In the demo, I used four <th> tags (ID, Name, Quality, and Quantity). After creating all headings, the table row’s closing tag is used to end the row i.e. </tr>. By default, the table headings are bold.
The next step is to create table data by using the <td> tag. The <td> tags are also used inside the <tr> tag.
<tr> <td>table data 1</td> <td>table data 2</td> <td>table data 3</td> <td>table data 4</td> </tr>
Generally, the number of <td> tags matches the number of <th> tags in table HTML. After creating all <td> in table rows, you have to use the </table> tag to end or close the table, as shown in the demo.
Using CSS in HTML tables
The above table was quite simple and boring. Let us add some style and colors to it by using the power of CSS.
In this demo, a few CSS properties are used to design a table of HTML.
The code:
<!DOCTYPE html>
<html>
<head>
<title>HTML table demo</title>
<style>
/*Using CSS for table*/
.demotbl {
border-collapse: collapse;
border: 1px solid #69899F;
}
.demotbl th{
border: 2px solid #69899F;
color: #3E5260;
padding:10px;
}
.demotbl td{
border: 1px dotted black;
color: #002F5E;
padding:15px;
width:100px;
}
</style>
</head>
<body>
<p>A table with CSS properties</p>
<table class="demotbl">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</body>
</html>
You can see in code, the table code almost remains the same except the table tag is using a CSS class:
The demotbl class of CSS defines the look of the table including the border of the table, headings, and table data. The color of text and padding is also set in this CSS class.
The class is included in the <head> tag of the web page. You may include this class in an external CSS file or use the <style> tag in <table>, <th> and <td> tags for inline properties.
The following classes are used in above demo:
.demotbl {
border-collapse: collapse;
border: 1px solid #69899F;
}
.demotbl th{
border: 2px solid #69899F;
color: #3E5260;
padding:10px;
}
.demotbl td{
padding:10px;
border: 1px dotted black;
color: #002F5E;
padding:15px;
}
By style tag
See the following demo that has the same look of the table as above while using the style tag to apply inline CSS properties.
The markup:
<!DOCTYPE html>
<html>
<head>
<title>HTML table demo</title>
</head>
<body>
<p>A table with CSS properties</p>
<table style="border-collapse: collapse;border: 1px solid #69899F;">
<tr >
<th style="border: 2px solid #69899F;color: #3E5260;padding:10px;">Product ID</th>
<th style="border: 2px solid #69899F;color: #3E5260;padding:10px;">Product Name</th>
<th style="border: 2px solid #69899F;color: #3E5260;padding:10px;">Product Quality</th>
<th style="border: 2px solid #69899F;color: #3E5260;padding:10px;">Product Quantity</th>
</tr>
<tr>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">1</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">Wheat</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">Good</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">200 Bags</td>
</tr>
<tr >
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">2</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">Rice</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">Good</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">250 Bags</td>
<tr style="padding:15px;border: 1px dotted black;color: #002F5E;">
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">3</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">Sugar</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">Good</td>
<td style="padding:15px;border: 1px dotted black;color: #002F5E;">200 Bags</td>
</tr>
</table>
</body>
</html>
You have to repeat the same properties for <tr> and <td> to get that look, so this is not a recommended way in this scenario.
Another drawback of this approach will be maintainability. If you need to make changes in the future, then you may have to do it in many places.
If CSS is used externally, you can apply changes at one place that will be applied across, wherever you used that CSS.
Using CSS3 properties for table presentation
In this example, more CSS properties are used to present an HTML table. These include border-radius which is a CSS3 property, text-shadow, background color, and many others.
HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<title>HTML table demo</title>
<style>
/*Using CSS for table*/
.demotbl {
border: 0px solid #69899F;
}
.demotbl th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 3%,
rgb(139,198,66) 52%,
rgb(158,217,41) 88%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.demotbl td{
width:100px;
padding:10px;
text-align:center;
vertical-align: top;
background-color:#DEF3CA;
border: 1px solid #BED3AB;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
</style>
</head>
<body>
<p>A table with CSS properties</p>
<table class="demotbl">
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr>
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr>
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</body>
</html>
You can see the complete code for this table in the demo page.
Click here to learn more about CSS properties.
A table with thead, tbody, and tfoot tags
A table also supports <thead>, <tbody> and <tfoot> tags that act as the table header, table body where content or table data exists and table footer.
The advantage of using these tags is in larger tables. In that case, the table header and footer remain in place while the body of the table may scroll.
The following example uses these tags with different CSS properties:
Example’s code:
<!DOCTYPE html>
<html>
<head>
<title>HTML table demo</title>
<style>
/*Using CSS for table*/
/* Table 3 Style */
table.tblcls{
font-family:Arial;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1.7em;
text-align:center;
border-collapse:collapse;
}
.tblcls thead th{
padding:6px 10px;
text-transform:uppercase;
color:#444;
font-weight:bold;
border-bottom:5px solid #444;
}
.tblcls thead th:empty{
background:transparent;
border:none;
}
.tblcls thead :nth-child(2),
.tblcls tfoot :nth-child(2){
background-color: #3E5F74;
color:#FFA477;
}
.tblcls tfoot :nth-child(2){
-moz-border-radius:0px 0px 0px 5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
}
.tblcls thead :nth-child(2){
-moz-border-radius:5px 0px 0px 0px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
}
.tblcls thead :nth-child(3),
.tblcls tfoot :nth-child(3){
background-color: #6792AD;
color:#FFA477;
}
.tblcls thead :nth-child(4),
.tblcls tfoot :nth-child(4){
background-color: #95B4C6;
}
.tblcls tfoot td{
font-size:38px;
font-weight:bold;
padding:15px 0px;
text-shadow:1px 1px 1px #fff;
}
.tblcls tbody td{
padding:10px;
}
.tblcls tbody tr:nth-child(4) td{
font-size:26px;
font-weight:bold;
}
.tblcls tbody td:nth-child(even){
background-color:#444;
color:#444;
border-bottom:1px solid #444;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.39, rgb(149,180,198)),
color-stop(0.7, rgb(224,224,224))
);
background:-moz-linear-gradient(
center bottom,
rgb(149,180,198) 39%,
rgb(224,224,224) 70%
);
text-shadow:1px 1px 1px #fff;
}
.tblcls tbody td:nth-child(odd){
background-color:#000059;
color:#f0f0f0;
border-bottom:1px solid #444;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.39, rgb(44,67,82)),
color-stop(0.7, rgb(62,95,116))
);
background:-moz-linear-gradient(
center bottom,
rgb(44,67,82) 39%,
rgb(62,95,116) 50%
);
}
.tblcls tbody td:nth-last-child(1){
border-right:1px solid #222;
}
.tblcls tbody th{
color:#696969;
text-align:right;
padding:0px 10px;
border-right:1px solid #aaa;
}
</style>
</head>
<body>
<p>A table with CSS properties</p>
<table class="tblcls">
<tbody>
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Basic</th>
<th scope="col" abbr="Medium">Business</th>
<th scope="col" abbr="Business">Optimum</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Full Detail</th>
<td>More..</td>
<td>More..</td>
<td>More..</td>
</tr>
</tfoot>
<tr>
<th scope="row">Price Starting at</th>
<td>$19.99/mo</td>
<td>$47.99/mo</td>
<td>$79.99 first month</td>
</tr>
<tr>
<th scope="row">CPU</th>
<td>1 CPU</td>
<td>2 CPU cores</td>
<td>4 CPU cores</td>
</tr>
<tr>
<th scope="row">RAM</th>
<td>1 GB</td>
<td>4 GB</td>
<td>8 GB</td>
</tr>
<tr>
<th scope="row">Disk Space</th>
<td>40 GB</td>
<td>90 GB</td>
<td>120 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>1 TB</td>
<td>3 TB</td>
<td>4 TB</td>
</tr>
<tr>
<th scope="row">Free Domain</th>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Dedicated IP</th>
<td>1 IP</td>
<td>2 IPs</td>
<td>2 IPs</td>
</tr>
<tr>
<th scope="row">Money back</th>
<td>Anytime moneyback</td>
<td>Anytime moneyback</td>
<td>Anytime moneyback</td>
</tr>
</tbody>
</table>
</body>
</html>
For the basic users, this may require a lot to go through this code. However, just to give an idea how a table may look and by using the power of CSS and CSS 3 how you may design the tables for your own or clients websites.
The classes for thead, <th>, and <tfoot> are created separately in the head section while the table tag is just assigned the main class in markup section:
Also, the CSS is using some compatibility properties to deal with different browsers like Chrome, Mozilla etc.
You can see the whole code in the demo page for that table. Feel free to change the background colors, text color, shadows etc.
An HTML table based at Bootstrap framework
Until now, I just created a simple demo table along with tables that used custom CSS properties. If you look at these tables on the smaller screen, you may have problems viewing it or scroll bars appear in your Smartphone.
In today’s world, where more and more people are using mobiles and smartphones, it has become important that the components of your website, like tables, are responsive or mobile friendly.
No matter where a user accessing your site, it should leave a good user experience. One of the ways to deal with this issue is using the Bootstrap framework.
Bootstrap has table related classes that you may use to create responsive tables quite easily. A lot of CSS style is already done while using that framework.
See an example below of creating a table that is Bootstrap based. I will explain how it is created after that:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap basic table example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container ">
<h1>A Bootstrap table</h1>
<table class="table table-bordered table-striped table-hover">
<tr class="danger">
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quality</th>
<th>Product Quantity</th>
</tr>
<tr class="info">
<td>1</td>
<td>Wheat</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="warning">
<td>2</td>
<td>Rice</td>
<td>Good</td>
<td>250 Bags</td>
<tr class="info">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
<tr class="info">
<td>3</td>
<td>Sugar</td>
<td>Good</td>
<td>200 Bags</td>
</tr>
</table>
</div><br /><br />
</body>
</html>
Just a few points to mention in order to create tables based on Bootstrap framework:
Step 1:
You have to include Bootstrap CSS library in order to utilize table related classes:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” integrity=”sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==” crossorigin=”anonymous”>
Step: 2
In the markup section, just like in the above examples, you have to create the HTML table tag <table> and include a few classes of Bootstrap tables. In the demo, I used:
I have used different classes for <th> and <td> tags. For example:
These are pre-defined classes in Bootstrap framework. If you small the size of the browser window (if working on desktop or laptop), you will notice the table is resizing itself accordingly.
If you are looking at a demo in a Smartphone then you can see the table is already resized.
To learn more about Bootstrap based tables, click on the link.
To learn about Bootstrap framework go to this link.
Final word
You can create tables of HTML by using the <table> tag along with <tr>, <th> and <td> tags. The table attributes like border, bgcolor, colspan, rowspan, etc. have been deprecated in the latest version of HTML.
The W3C instructs to style tables in CSS rather than using HTML attributes.
You may apply CSS in tables by using external, internal, or inline CSS.
Besides, you may use third-party plug-ins or frameworks that also use CSS underneath, however, most of the work or styles are already done.