Table is one important element for displaying data. Important data become unattractive if the table is not interesting. So, this time, we will discuss styling table using CSS 3, so that out table becomes more beautiful.
So, what is an interesting table? in a simple word: it’s convenient to see both for the neatness of the layout and the color combination being used.
The color of the table rows usually uses soft colors, because the point of interest is the data. To get proper combination of soft colors, we can use monochromatic color scheme. This scheme based on one color (hue), then changed its tints, tones, and shades to get other colors.
Well, for all of our discussion here, the goal is to create the following table:
Here is the final HTML and CSS code:
<html>
<head>
<style type="text/css">
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
}
/* Table */
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
border: 1px solid #e1edff;
padding: 7px 17px;
}
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}
/* Table Header */
.demo-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
}
.demo-table tbody td:first-child,
.demo-table tbody td:last-child,
.demo-table tbody td:nth-child(4) {
text-align: right;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fbff;
}
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
/* Table Footer */
.demo-table tfoot th {
background-color: #e5f5ff;
}
.demo-table tfoot th:first-child {
text-align: left;
}
.demo-table tbody td:empty
{
background-color: #ffcccc;
}
</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>
<tr>
<td>6</td>
<td>Franky</td>
<td>Steam Iron</td>
<td>October 17, 2016</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Gerry</td>
<td>Air Conditioner</td>
<td>November 17, 2016</td>
<td>325</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>1040</th>
</tr>
</tfoot>
</table>
</body>
</html>Just copy paste all of the above code and run it on a browser. Done.
Need some explanations? OK, let’s continue…
1Important: Browser has defined some styles to tables
First of all, it is important to note that a browser has defined specific styles for tables, so to change this behavior we have to override that styles.
One of them is the font-size property, so, we can’t define it globally such as in the parent element of the table, in this case, body element. In the above example we can’t define the table font-size like this:
body {
font-size: 12px;
}While for the font-family property, the browser doesn’t define it to the table, so we can define it globally, in this example in the body element.
Another example is the border-collapse property, by default, the browser will give a value of separate. This will make us see a space between columns, therefore, in the example above, we defined this property with collapse value.
.demo-table {
border-collapse: collapse;
font-size: 14px;
}While the default property:value of the table defined by the browser (Chrome) is:
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
font-variant: normal normal;
}2Styling table using CSS 3 – Change text align
By default, a browser will define the text-align property with start value. This means the browser will define the align according to the type of website, whether LTR (left to right) or RTL (right to left).
On the LTR (common type) website, the align will be left, so we don’t need to redefine the align.
In the example table above, all the text is aligned left, but it would be neater if the column of number, date and price are aligned right, so, for those columns, we define the text-align property with right value, the CSS code:
.demo-table tbody td:first-child,
.demo-table tbody td:nth-child(4),
.demo-table tbody td:last-child {
text-align: right;
}In the CSS code above, we use three pseudo-class selectors, two of them only available in CSS 3 (:nth-childand :last-child), so consider the browser support of those elements.
As the name implies, :first-child will match the first child element (No. column) and :last-child will match the last child element (the Amount column), whereas :nth-child will match the n-th column, in the above example 4th column ( :nth-child(4) ) that is the Date column.
To know more about this three pseudo-class selector, you can read the article here: Understanding :first-child and :last-child Pseudo Class and Understanding :nth-child and :nth-last-child Pseudo Class Selector
3Table header (<th>) characteristics
In the finished table, we use <th> in the <thead> and <tfoot>. By default, a browser (Chrome) have also defined styles for <th> element, that is:
th {
font-weight: bold;
text-align: -internal-center;
}
td, th {
display: table-cell;
vertical-align: inherit;
}Well, because it meets our needs which are bolded font and centered align, then we just need to change the background color to blue, font color to white, and the shape of the letter into capital.
The CSS Code:
.demo-table thead th {
background-color: #508abb;
color: #FFFFFF;
border-color: #6ea1cc !important;
text-transform: uppercase;
}We use the !important rule for the border-color value because the border color has been defined previously in demo selector-table th, .demo-table td, the !important rule will take precedence
While for the table footer <tfoot>, we just change the background color and the align of text
.demo-table tfoot th {
background-color: #e5f5ff;
}
.demo-table tfoot th:first-child {
text-align: left;
}4Highlighting row
Furthermore, when styling table using CSS 3 in the horizontal table (the data read horizontally), we’ll want to make the row highlighted when the mouse hovering a column, it will make visitor easier to read the data.
In this example, when the hover event occurs, we’ll change the background color of the column to yellow
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}In the above code, the transition property will make the change of the color to be smooth.
5Styling the title of the table
In the previous example, we show the title of the table using the <caption> element.
Just like any other elements, the browser, by default also defines the style for this element that will place the title above the table and aligns the title to the center.
The browser’s default style:
caption {
display: table-caption;
text-align: -webkit-center;
}
In the example above, we want to place the title underneath of the table, so we need to define the caption-side property with a value of bottom
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}6Styling table using CSS 3 – Give a certain color to the blank column
For the purposes of data analysis, sometimes we need to know which columns are empty. It becomes harder when we display huge number of data
So, to overcome this, we need to make the blanks column have different color from the others, fortunately, now, CSS has provided a selector for selecting an empty element, which is pseudo class :empty
.demo-table tbody td:empty
{
background-color: #ffcccc;
}Note: The pseudo-class :empty is only available on CSS 3. This has been supported by major browsers since its initial version, but Internet Explorer only supports it on version 9.0+.
So, if our design intended for older versions of IE, then it can be solved by adding a class to the empty column, for example:
<tr>
<td>6</td>
<td>Franky</td>
<td>Setrika</td>
<td>17 Oktober 2016</td>
<td class="empty"></td>
</tr>CSS code:
.demo-table .empty
{
background-color: #ffcccc;
}Final Words
We can make many variations when styling table using CSS, the point is: the design of the table (either color, border, caption) should match the theme (color scheme) used on our website because it will make a nice first impression .
In addition, notice the browser support of class/pseudo-class/pseudo-element that we use, make sure it safe and suit to our need.
If you want to know more about table elements used in this article, you can refer to this article: How to Create Table Using HTML 5 and CSS 3
Another useful stuff: 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 |
| How to Create Table Using HTML 5 and CSS 3 (0) | 2018.07.21 |