Styling Table Using CSS 3

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:

Styling Table Using CSS 3 - Finished 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…

1 Important: 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;
}

2 Styling 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-child and :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

3 Table 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;
}

4 Highlighting 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.

5 Styling 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;
}

6 Styling 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 &#8211; Fresh Design

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

5 Responses

  • I want to display SQL database items in a simple two column table over an image background. I figure I can do that easily enough with CSS. My main concern is that I don’t want any browser menus or address bar to display. I know that can be done with user interaction, but I don’t want that. I want to code so that the display is done without any user interaction. This is just going to be on a display screen from a Raspberry Pi. All programming interaction is done headless from an SSH shell on a networked computer. Once set up, the Pi would run its own localhost to serve up the display disconnected from internet or LAN. I just want to run a local building directory with occupants and suite numbers. Is this possible, or am I approaching this wrong? I like all the CSS examples here.

    • Hi, Thank you for your feedback.
      I am sorry, To be honest, I am not familiar with how to hide any browser menus or address bar, so I can’t give any suggestions. I think that is related to desktop based application programming and I have no experience with it.

  • I’ve seen javascript code, but it appears to require user interaction – what I’m trying to avoid. I’d like the display to immediately show in full screen so there is nothing at the top like an address bar – automatically (by code). Of course, once anything is displayed in a browser, the user can hit the F11 key to toggle in and out of full screen. Thanks anyway. I really like your straightforward samples.

    • Hi,
      in javascript, there is an event to automatically execute the script right after the page loaded, but still, the user will see the toolbar first, moreover, if a user disables the javascript engine, the code will not work. Maybe you have to build your own simple browser.
      Anyway, thank you for visiting this site.

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social