Stylizing A CSS Table
Tables have been around forever, at one point they were used as the structure of our early websites, now we build with div’s. However we still need the good ol’ table from time to time to show off data. Whether it be to show some relationships between data or just to list out some relevant data. In this tutorial we will step through how to build and stylize a table. First we will insert our html and step through how we intend to display this information.
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud servers!
<!DOCTYPE html></html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Stylizing CSS Tables</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<table summary="This is what various peoples names would be if they were the selected type of person.">
<caption>Converted Names</caption>
<thead>
<tr>
<th class="name">Name Types</th>
<th>Mike</th>
<th>Jamie</th>
<th>Matt</th>
<th>Darrel</th>
</tr>
</thead>
<tbody>
<tr>
<td class="typename">Ninja Name</td>
<td>Mikikaku</td>
<td>Jamichichi</td>
<td>Matikachi</td>
<td>Darishikuta</td>
</tr>
<tr class="odd">
<td class="typename">Cyborg Name</td>
<td>Mechanical Infiltration and Killing Entity</td>
<td>Journeying Artificial Machine Intended for Exploration</td>
<td>Mechanical Android Trained for Troubleshooting</td>
<td>Digital Artificial Repair and Rational Exploration Lifeform</td>
</tr>
<tr>
<td class="typename">Gangster Name</td>
<td>Big Mike</td>
<td>Jokin' Jamie</td>
<td>Maniac Matt</td>
<td>D-fizzle</td>
</tr>
<tr class="odd">
<td class="typename">Clown Name</td>
<td>Bopo</td>
<td>Lotso</td>
<td>Funsos</td>
<td>Dopso</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Creating the Table
The Table Header
We are creating a table that will show name variations for different peoples names. First we give the table a summary for accessibility and then create a caption within it and use that as our title. Next we create the thead and populate some th‘s with some names and also a “Name Types” cell all the way to the left as we have to show the relation between the persons name and the name one would have based on the type of name. (example: My Name is Mike, My Ninja Name is Miikikaku). As for classes within the header we only need to give the “Name Types” cell a class so that none of the name types for this particular table wrap. By adjusting the width of this one cell it automatically does this for all the cells in the column which is quite handy.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
The Table Body
Now we will organize the data in the tbody in conjunction with the headers location, listing out for instance all of Mike’s possible names underneath his name. Each name will also correspond to the name type it is apart of. In order to differentiate each “Name Type” (example: Ninja Name, Cyborg Name etc.) we must give a class to each one of these name types. There are other ways to achieve the same goal rather than giving a class to each cell, using colgroup would work but we will cover that element another time. We will also need to give every other row a class of odd as to have alternating row colors for this table.
A quick side note, in CSS3 we will be able to call nth and many other elements, such as first and last child, so it will be extremely easy to dynamically style your row and call out certain elements within other elements.
CSS City
Now that we have our table laid out and our classes called we are almost ready to start styling our table. We are going to be building our table with these ideas at heart:
- Tables look better with more spacing, everywhere, if you have a table be prepared to pad, plain and simple.
- Just because this text is in a box doesn’t mean it shouldn’t be just as easy to read as the rest of your site, give plenty of breathing room so the text is readable.
- Bold important parts of your table such as the th elements and in this case the corresponding relationship to that element.
- Use soft colors that match your site’s theme throughout.
- Implementing a hover on your tr elements can be very powerful especially when showing the data or sifting through large amounts of it.
- Use borders as needed to break up irrelevant content.
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
You now have some basic rules to follow when creating your tables, so with that let’s get to it. Here is the code that was used for this example.*
{
margin: 0px;
padding: 0px;
}
.wrapper
{
width: 960px;
margin: 0 auto;
}
table
{
width: 900px;
margin: 0 auto;
border-collapse: collapse;
font-family: Trebuchet MS, Arial, Helvetica;
font-size: 13px;
color: #0270a3;
}
caption
{
text-align: left;
font-weight: 700;
font-size: 18px;
padding: 8px 0px;
color: #053485;
}
table th
{
padding: 9px 0px 15px 7px;
background-color: #FFF;
text-align: left;
font-size: 15px;
color: #0b6db8;
border-bottom: 1px solid #98e4f5;
}
tbody
{
border-right: 1px solid #98e4f5;
}
.typename
{
background-color: #FFF;
font-weight: 700;
border-right: 1px solid #98e4f5;
}
table .name
{
width: 120px;
}
table td
{
padding: 15px 7px;
margin: 4px;
border-bottom: 1px solid #98e4f5;
}
table tr
{
background-color: #e8f7ff;
}
table .odd
{
background-color: #f7fcff;
}
table tr:hover
{
background-color: #c7eeff;
}
Styling the Table and its Headers
First we give the table a nice health width, center it, and collapse the borders so we don’t have any default spaces in our table elements. We also declared the default size and font for the table with a nice color as well. Next we styled our caption tag to behave more or less like a title for the table. After we have the width and title set up we will go into the thead section and start styling our th elements. We will give our th elements a slightly larger font-size, bold them, and space them apart from the table data so they appear more like headers. We will also go ahead and add the width to the name class so that our text doesn’t wrap. Next we will go ahead and style the typename class and take care of the last of the titles for this table. We will also bold this section but leave the font size the same as the data, and give it a white background color as we will be changing these shortly. Lastly we will add borders around the tbody and the name class to encapsulate the data portion of the table.
Styling the Table Data
We have a considerable amount of data and our first order of business is to not make it so cramped so after accessing the td element we give all of them a very healthy spacing which will give the table a much cleaner look and also make it much easier and pleasurable to read. We will also add a border to the bottom of all of these td elements to separate them from the other types of names. Lastly we will give similar but very light variants of the colors to the tr elements, one for the regular tr and one for the odd class so that we have alternating rows, once we have those in place choose a third color to act as the background color when the tr is being hovered over to give your table interactivity. Once all is said and done your table should look similar if not identical to this:
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
Success!
Understanding how and when to use clean and readable tables is a very powerful tool, if you see an old dirty table of yours go clean it up! Learn to wield the CSS sword wisely my friend for one day you will do battle, and it will be glorious. Have a good one.
CSS Table
