Table is one important element for displaying data. Although relatively easy to create a table, there are important things that need to be known, so this time, we will discuss how to create table using HTML 5 and CSS 3.
Actually, to create a table, we only need to code HTML, while CSS is used to design the table so it looks more neat and beautiful.
In this tutorial we’ll create a table like the following:
I. Table in HTML 5
In HTML 5, there is no new element related table, but many important attributes of elements are not supported anymore, such as: width, height, valign, align, and bgcolor
So if we want to use those attributes, we need to change it to inline style/CSS
The following example is invalid HTML 5 table:
<table>
<tr>
<th width="20">No</th>
<th width="150">Name</th>
<th width="250">Addess</th>
</tr>
</table>Instead, we need to change it the following:
<table>
<tr>
<th style="width:20px">No</th>
<th style="width:150px">Name</th>
<th style="width:250px">Addess</th>
</tr>
</table>II. Elements Used To Create Table Using HTML
When creating a table using HTML, we are faced with many elements, but essentially only with certain three elements, we can create table:
<table>element used to define the table<tr>(table row) element used to create a row,- and
<td>(table data) element used to create columns.
For Example: create an HTML file, e.g. table.html and then copy and paste the following code:
<html>
<head>
<style type="text/css">
td {
border: 1px solid #CCCCCC;
padding: 5px 15px;
}
</style>
</head>
<body>
<table>
<tr>
<td>No</td>
<td>Customer</td>
<td>Item</td>
<td>Price</td>
</tr>
<tr>
<td>1</td>
<td>Anthony</td>
<td>Television</td>
<td>250</td>
</tr>
</table>
</body>
</html>Run the file in a browser. It will show a table containing two rows and four columns as follows:
The figure above shows that each of <tr> elements will create a row while the <td> element <td> which located inside the <tr> element will divide the rows into columns.
III. Additional Element To Create Table Using HTML
Well, it’s quite easy to create a table, right? yes, just use the minimal element, and the table would be created. But, our table is still minimalist, for a full feature table, we need to use some other elements, that are:
<th>(table header) placed inside<tr>element is used to define a column header, once again a columnnot a row.<caption>which is directly placed inside<table>element is used to display the title of the table. This element must be at the top of other elements.<colgroup>or<col>used to styling entire column. Its position should be at the top, under<caption>element and above<thead>element.<thead>direct child of the<table>element is used to group rows that will be used as a table header. Its position is always at the top after the<colgroup>or<caption>element<tbody>direct child of the<table>element is used to group rows that will be used as a table body. Its position must be under the<head>element.<tfoot>direct child of<table>element is used to group rows that will be used as a table footer. Its position must be under the<thead>but not necessarily under<tbody>
Example of valid HTML 5 Table:
<table>
<caption></caption>
<colgroup>
<col/>
</colgroup>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>Well, let us adjust the previous table using the above elements:
<html>
<head>
<style type="text/css">
th, td {
border: 1px solid #CCCCCC;
padding: 5px 15px;
}
</style>
</head>
<body>
<table>
<caption class="description">Table 1. Sales Data of Electronics Division</caption>
<thead>
<tr>
<th>No</th>
<th>Customer</th>
<th>Item</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anthony</td>
<td>Television</td>
<td>September 07, 2016</td>
<td>250</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Washing Machine</td>
<td>July 10, 2016</td>
<td>150</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Water Dispenser</td>
<td>August 11, 2016</td>
<td>95</td>
</tr>
<tr>
<td>4</td>
<td>Dean</td>
<td>Refrigerator</td>
<td>September 15, 2016</td>
<td>175</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Wall Fan</td>
<td>Oktober 11, 2016</td>
<td>45</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</body>
</html>The result is:
The Table layout still needs improvements because we have not added any style, except only the border and padding. The addition of the styles will be discussed later at the bottom.
Code explanation:
- We create
<thead>at the top, in certain cases could be at the bottom, for example when using PHP to count the number of rows to be displayed in the header. - We use
colspanattribute to combine multiple columns (in Microsoft Excel we use merge cells feature)
Some Important Rules
There are some points to consider:
- Do we need to use
<thead>,<tbody>, and<tfoot>? the short answer is no, BUT, those elements will help us a lot when styling the table using CSS code. we’ll discuss it later. - The caption by default will be displayed at the top of the table. If we want to move it to the bottom then we can use CSS
caption-side: bottom <th>element not always inside<thead>element, it could be anywhere, as stated earlier that<th>is a column, not a row, so it can be anywhere.
IV. Using Colspan Attribute and Rowspan Attribute
Furthermore, in HTML we can also merge cell/column of the table, again columns not rows.
This merger can be done either in horizontal direction or vertical direction, for horizontal direction we use colspan attribute, while for vertical direction, we use rowspan attribute.
1Using colspan attribute to merge columns of a table horizontally
Furthermore, to merge columns vertically (across rows), we use rowspan attribute. As noted earlier, the colspan and rowspan are column attribute so it can be applied to both <th> and <td>.
The value of the rowspan attribute indicates the number of columns to be merged. The merger is started from the column where the rowspan attribute defined.
For example:
<html>
<head>
<style type="text/css">
th, td {
padding: 5px 15px;
border: 1px solid #CCCCCC;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Item</th>
<th colspan="2">2016</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Television</td>
<td>4500</td>
<td>7500</td>
<td>1200</td>
</tr>
<tr>
<td>2</td>
<td>Refrigerator</td>
<td>2000</td>
<td>4000</td>
<td>6000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>6500</th>
<th>1150</th>
<th>1800</th>
</tr>
</tfoot>
</table>
</body>
</html>The Result is:
The figure above shows that the second row only has two columns, this is because the other columns have been merged with the above column using the rowspan attribute.
V. Define The Width of The Column in HTML Table
Sometimes, for a particular purpose, we need to define the width of columns of a table. For this purpose, we can define it in CSS or in width attribute of the column.
By using CSS, we need to define a class to the column (<th> or <td>), while using width attribute, we can directly write it to the elements.
It is important to note that we can only determine the width of a column only if it real single column not a single column resulted by colspan attribute
Consider the following illustration:
In the example above, we define the width of the columns in <thead> container.
However, we can also determine the width of the columns on the <td> element in the <tbody> container which may be more convenient because it does not contain colspan attribute.
Define the width of the column using colgroup
Another elegant way to define the width of the column of HTML table is using the <col> or <colgroup>element
<col> or <colgroup> element then make sure that the amount of the element should be equal to the number of columns. If not, then it will be resulted an invalid HTML Table
VI. Create Table Using HTML 5 and CSS 3 – Adding Style
Now we have able to create a table in HTML, but the appearance of the table still not good, so we need to add some styles to the table so it look neat and beauty.
Designing tables using CSS is easy, however, there are several things that need to be considered, one is the default table style that is defined by the browser.
Because this discussion takes some place, so to prevent this article become too long, I separate it to an article, you can read it here: How to Design Table Using CSS 3 – a Complete Guide
Example of CSS Code:
<html>
<head>
<style type="text/css">
/* Table */
body {
font-family: "lucida Sans Unicode", "Lucida Grande", "Segoe UI", vardana
}
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
padding: 7px 17px;
}
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}
.demo-table thead th:last-child,
.demo-table tfoot th:last-child,
.demo-table tbody td:last-child {
border: 0;
}
/* Table Header */
.demo-table thead th {
border-right: 1px solid #c7ecc7;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
border-right: 1px solid #c7ecc7;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fff7;
}
.demo-table tbody tr:nth-child(even) td {
background-color: #dbffe5;
}
.demo-table tbody td:nth-child(4),
.demo-table tbody td:first-child,
.demo-table tbody td:last-child {
text-align: right;
}
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
/* Table Footer */
.demo-table tfoot th {
border-right: 1px solid #c7ecc7;
}
.demo-table tfoot th:first-child {
text-align: right;
}
</style>
</head>
<body>
<table class="demo-table">
<caption class="title">Table 1. Sales Data of Electronics Division</caption>
<thead>
<tr>
<th>No</th>
<th>Customer</th>
<th>Item</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anthony</td>
<td>Television</td>
<td>September 07, 2016</td>
<td>250</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Washing Machine</td>
<td>July 10, 2016</td>
<td>150</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Water Dispenser</td>
<td>August 11, 2016</td>
<td>95</td>
</tr>
<tr>
<td>4</td>
<td>Dean</td>
<td>Refrigerator</td>
<td>September 15, 2016</td>
<td>175</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Wall Fan</td>
<td>Oktober 11, 2016</td>
<td>45</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>715</th>
</tr>
</tfoot>
</table>
</body>
</html>The result is:
In the table above, we use a lot of pseudo-elements, such as :first-child, :nth-child, and :last-child. We use those to make change the align of the columns into right side because by default the browser will define the align to left side (for LTR website) and right side (for RTL website).
In Addition, we also use a psuedo-class :hover to highlight row when the hover event occurs (mouse hovering the column).
More deep discussion on styling HTML tables can be followed here: Designing Tables Using CSS 3 – A Complete Guide
Another useful resource: 10 Clean HTML Table Design Using CSS 3 – Fresh Design
'[ 기타 활동 ] > HTML5 & CSS' 카테고리의 다른 글
| How to Create a PHP Contact Form With MySQL & HTML5 Validation (0) | 2018.07.21 |
|---|---|
| 10 Clean HTML Table Design Using CSS 3 – Fresh Design (0) | 2018.07.21 |
| Styling Table Using CSS 3 (0) | 2018.07.21 |