We use cookies. More

CSS Basics Part 12: CSS Tables

CSS
f t g+ in

In this tutorial we will talk about how to style HTML tables with the help of CSS by giving some examples.

Advertisement

Welcome to the 12th part of CSS Basics series in which I will talk about styling tables with CSS. By the way, if you didn't check the previous parts yet, I strongly recommend you do that now as I believe you will find some helpful information and examples about basic CSS. You can start with the first part, introduction to CSS.

Have you ever heard the term tableless web design? If not, let me explain what it is in a few words. Before CSS came out in 1996, the layout of a web page was constructed mainly using HTML tables (<table></table>) and they were the main design elements until the early 2000s since CSS was not much popular back then. Tables were used not only to represent tabular data, but also they were used to arrange elements on a web page. Today, web design world has a tendency towards tableless web design; styling the layout with CSS and using tables only when it is necessary.

From the above paragraph, you should understand that, it is a good practice not to use tables where it is really not necessary. Using CSS sizing and positioning properties is the way to go when designing the layout of a web page. Only when you need to present tabular data like statistics, a list of items, etc. should you use tables in your design.

Making this point clear, let's continue with how to style tables with CSS. You can create nice looking tables with CSS easily by controlling the borders, dimensions, backgrounds and color of table elements as I will demonstrate in the following paragraphs.

Table Borders

By default, the border of a table is invisible. border shorthand property can be used to style the borders of a table and its cells. See the example below:

table, td {
border: 2px solid #4e0505;
}

Cell 1Cell 2
Cell 3Cell 4

Table Width and Height

The height and width of a table or columns/rows can be specified using width and height properties. See the example below:

table {
width: 200px;
height: 100px;
border:2px solid #4e0505;
}
td {
width: 50%;
height: 50%;
border:2px solid #4e0505;
}

Cell 1Cell 2
Cell 3Cell 4

As you can see, you can use either the pixel value or a percentage value to set the width or height.

Text Alignment in Tables

As in all HTML elements, it is possible to align text within tables as well. Here is a sample code to align the text in the cells to center:

table {
text-align: center;
width: 200px;
height: 100px;
border:2px solid #4e0505;
}
td {
width: 50%;
height: 50%;
border:2px solid #4e0505;
}

Cell 1Cell 2
Cell 3Cell 4

You can also align text in the cells vertically using the vertical-align property.

Cell Padding

Using padding could be a good idea to increase readability of a table. Here is a sample code:

td {
padding: 10px;
}

Table Color

Finally, you can control the background color of the whole table or the cells using the background-color property.

table {
background-color: #1d79a8;
}
td {
background-color: #c3f4cd;
}

Cell 1Cell 2
Cell 3Cell 4

This way, you can create colorful and attractive tables on your website. Don't you think playing with CSS is so great?

This is all I can say about styling tables with CSS. I hope you will like the examples on this post. Please let me know if you have any questions and I will try my best to help you.

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in