Web Development

Coolest CSS Table Ever

Coolest CSS Table Ever is the section 9 of Beginner’s Guide to CSS.

If I ask you to present a data set on a HTML web page, what is the best way to do that? My data set has a sets of records of the songs I most listen into. Each record has the name of the song, the singer and the language. So tell me what way you prefer?

Of course!! The answer is HTML Tables. You already know about it.

But I don’t like to present it in a ugly looking white table. I need color on it. Some catchy look. What would you do?

That’s the place you are going to stuck in. You need to get the support from CSS to do that kind of a thing. Let’s see how to do that.

Table Border

By having border attribute on HTML you can specify whether you want a border or not. CSS border property will make it more extended on detail. See the following. We define not only it having a border but also how the border should be. The color, size, and pattern of the border.

[code language=”css”] table {
border: 1px solid green;
}
[/code]

You might wondered why the table has double borders when it displayed on the browser. That is because table as well as the each td has also a border. To avoid that use border-collapse property.

[code language=”css”] table {
border-collapse: collapse;
border: 1px solid black;
}
[/code]

Width and Height

As we change the width and height of the HTML table using attributes, we can do the same using CSS width and height properties. So with the width and height properties, the table, each column, and each row can be altered.

[code language=”css”] table {
width: 100%;
}

th {
height: 50px;
width: 25%;
}
[/code]

Text Alignment

You already know what kind of aligments can be have on a HTML content.  Left, right, or center. If there are certain columns you need to aligned into a different alignment than the default, you can use this property text-align. For example if I say, I need all the numbering content in the the record numbering column into center aligned what you need to do is add this property into the style of the s of the column.

[code language=”css”] td {
text-align: right;
}
[/code]

If you change the default size of a , then it is necessary to set the vertical alignment of the content, otherwise it will look so ugly. Those values can be top, bottom, or middle.

[code language=”css”] td {
height: 50px;
vertical-align: middle;
}
[/code]

Padding

You are already familiar with the HTML Table cellpadding attribute. This CSS property do the same kind of a thing.

[code language=”css”] td {
padding: 15px;
}
[/code]

Color

Here comes the coloring part. We coloured our border color, so now we change the background color of each .

[code language=”css”] td {
background-color: green;
}
[/code]

Caption

By default table captions displayed on the top of the table. If you like to change that, using caption-side attribute.

[code language=”css”] caption {
caption-side: bottom;
}
[/code]

 

With the things we had learned, let’s present our dataset nicely.

Table 1.1 : My Songs List
Song Title Singer Language
Dil Se Re A R Rahman Hindi
Hero Enrique Iglesias English

When the table becomes wider and wider with more columns, people will go through difficult time in following each record. So the standard way to present those kind of table is to use two background colors for rows repeatedly one after other. Look at the following image. It is a part of a table with so much long horizontal scroll bars and vertical scroll bars. See how the rows are colored.

css two colored table

When you colored the rows like this, it is easier to go through each record. Can catch all the data fields related to a specific row with a simple glance.

So now how to do this? By following the steps below you can create a fancy looking standard table like as the above.

  1. create two CSS classes each have a different background color. If you like to have one row with default white color, you need only one css class. [code languague=”css”] .mycolor{
    background-color:#CCEBFF;
    }
    [/code]

    This is our CSS class and we are going to use the default white as the other color.

  2. Refer the first CSS class on the first table row
    .

    [code languague=”html”] [/code]
  3. Refer the second CSS class on the second table row. If you are using the default table background color as the second background color, no need to apply any CSS class for this row. [code languague=”html”] [/code]

    As we are using the default background color, we are not assign any class in second row.

  4. Refer the first CSS class on the third table row.
  5. Refer the second CSS class on the fourth table row if you are not using default table background color as the second background color
  6. Repeat the steps 4 and 5 to the next table rows until the end of the table. [code languague=”html”] [/code]

    Our table row set will be look like this pattern. (Note: Remember to put the

    s as you like and closing tag

      in the code. If you find it difficult, please refresh your knowledge by looking at our HTML Tables section in out HTML tutorial)

When you learn about Javascript, you can do the same more easily without manually assigning the CSS classes to each row.

 


So in this section we learned how to create a fancy looking cool table to present your dataset more nicely. Also it helps reader to go through every record without much difficulty. In the next section we are going through some theory stuff of CSS. It may be little bit boring, but you must really understand what it says when using CSS in designing and making layouts.

WHAT’S NEXT?

Let’s learn what is CSS Box Model.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

3 Comments on "Coolest CSS Table Ever"

Notify of
avatar
Sort by:   newest | oldest | most voted
shelly
Guest

I’m very much enjoying this series of tutorials as a CSS refresher. Having said that, the last area where you describe the way to color your rows really, really, REALLY needs to have examples- both CSS and the HTML. Otherwise, the information becomes academic and without any examples of selecting multiple classes, it’s impossible to understand what’s trying to be conveyed.

Madonna
Guest

I read a lot of interesting content here. Probably
you spend a lot of time writing.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW