Simple CSS Table Tutorial: Create a Colorful Table with CSS

CSS
f t g+ in

Creating a table and styling via CSS is not a complicated thing. In this tutorial, we will demonstrate how to do that in detail.

Thumbnail Blaster - Video Thumbnail Creation Software

In this tutorial, I will demonstrate how to create a colorful table with CSS. But before that, I should warn you about using HTML tables properly in your web designs: Do not use tables for defining the structure of a web page. Use tables for displaying tabular data such as hours of operation or a price list. You can also check this post for more information about CSS tables.

Having said that, we can start with this simple CSS table tutorial.

Our table will display a list of three books. It will have four rows (one row for each book and one row for the headings) and three columns to display the following information: book name, author and publication year. Let's start with the basic structure of the table and then we will add style to it.

Create the table:

<table></table>

Add the headings row:

<table>
  <tr>
    <th>Book Name</th>
    <th>Author</th>
    <th>Year</th>
  </tr>
</table>

Add three more rows for the books:

<table>
  <tr>
    <th>Book Name</th>
    <th>Author</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>Crime and Punishment</td>
    <td>Fyodor Dostoyevsky</td>
    <td>1866</td>
  </tr>
  <tr>
    <td>Les Miserables</td>
    <td>Victor Hugo</td>
    <td>1862</td>
  </tr>
  <tr>
    <td>Fathers and Sons</td>
    <td>Ivan Turgenev</td>
    <td>1862</td>
  </tr>
</table>

The following table is the result of the above code:

Book NameAuthorYear
Crime and PunishmentFyodor Dostoyevsky1866
Les MiserablesVictor Hugo1862
Fathers and SonsIvan Turgenev1862

We have the basic HTML code of our table and now it is time to add borders and color to it using CSS.

We start with giving an ID (book-list) to the table and classes (book, author, year) to different colored cells so that we can control their style. The reason for giving an ID to the table is that we want to style only this specific table and no other tables on our website should be affected from this styling. If you want all the tables on your website to have the same style, you don't need to assign IDs to them.

<table id="book-list">  <tr>    <th>Book Name</th>    <th>Author</th>    <th>Year</th>  </tr>  <tr>    <td class="book">Crime and Punishment</td>    <td class="author">Fyodor Dostoyevsky</td>    <td class="year">1866</td>  </tr/>  <tr>    <td class="book">Les Miserables</td>    <td class="author">Victor Hugo</td>    <td class="year">1862</td>  </tr/>  <tr>    <td class="book">Fathers and Sons</td>    <td class="author">Ivan Turgenev</td>    <td class="year">1862</td>  </tr/></table>

Now, we can write the CSS code for our table. Collapse table cell borders, and add padding and borders to the cells:

#book-list{   border-collapse: collapse;}#book-list th, #book-list td {  padding: 5px;  border: 1px solid #888;}

Here is our new table:

Book NameAuthorYear
Crime and PunishmentFyodor Dostoyevsky1866
Les MiserablesVictor Hugo1862
Fathers and SonsIvan Turgenev1862

Now, add some color:

#book-list{   border-collapse: collapse;}#book-list th, #book-list td {  padding: 5px;  border: 1px solid #888;}#book-list th {  background: #febc0e;}#book-list .book{  background: #e0ecf7;}#book-list .author{  background: #cdef3d;}#book-list .year{  background: #f9f45e;}

And finally, we have:

Book NameAuthorYear
Crime and PunishmentFyodor Dostoyevsky1866
Les MiserablesVictor Hugo1862
Fathers and SonsIvan Turgenev1862

The more I learn about CSS styling, the more I like it. As you see, it is very easy to style a table using CSS. If you liked this tutorial, please let me know and I will write more tutorials such as this one.

Was this post helpful?

Please consider sharing it, and supporting us with a small tip. Thank you :)

f t g+ in