FacebookTwitter

Style HTML Table with CSS

By on Oct 4, 2014 in CSS, HTML

Share On GoogleShare On FacebookShare On Twitter

Table Style CSS

Tables are an important component of every website. By default they provide an excellent way of representing tabular data, but lack the looks. If you want to make your tables come alive with user friendly designs you are going to need some CSS.

Cascade Style Sheet or CSS can improve the looks of any table by a lot. Without any styles, tables are very dull. Add a little bit of CSS an you have an attractive display of tabular data that would make it easier to read and understand for your visitors.

Plain HTML table without CSS vs. Table with CSS

without styles table no css with styles table with css

Take a look at the first table on the left. As you can see it does not look very appealing. Sure you can see all the content perfectly and it might even make sense, but I think we can agree that the looks could be improved to make it more appealing and capture visitors attention.

In contrast, look at the table right under, it has some simple styling and it looks much more appealing to the eye. No doubt that a little CSS can make a big different when it comes to tables. Styling a table with css is a must.

banner222

Too much styling does not help either

Unfortunately, many people are confused when it comes to styling their tables. As a result, the styles applied are not very effective and instead of being appealing sometimes can be repealing. That is because too much styles is applied to the table, too many colors and details which take away the attention from what really matters, the data being displayed on the table. That is why you must be careful when styling your tables. You don’t want to make tables that look like a carnival because this will distract your visitors from the data you are trying to display. Instead, you want to keep your styles as concise as possible, giving a nice and easy appearance to the data begin displayed by the table.

Styling your Tables with CSS

I have put together a few styles that you can freely use for your own tables. They keep things simple, not too much but enough to capture attention and provide a user friendly interface. Feel free to use any of these styles in your website. You can also alter some of teh styles to match your color theme or layout.

CSS Table Style 1

Simple Grid Table

ID First Name Last Name
235312 John Doe
453123 Mark Jones
998332 Jonathan Smith
345612 Andrew McArthur
453123 Adam Fuller
998332 Tyler Watt
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!-- You can insert the CSS to either the document Head or link it as an external resource -->
<style type="text/css">
    table.table-style-one {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
    }
    table.table-style-one th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #3A3A3A;
        background-color: #B3B3B3;
    }
    table.table-style-one td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #3A3A3A;
        background-color: #ffffff;
    }
</style>
<!-- Table goes in the document BODY -->
<table class="table-style-one">
    <thead>
    <tr>
        <th>ID</th><th>First Name</th><th>Last Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>235312</td>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>453123</td>
        <td>Mark</td>
        <td>Jones</td>
    </tr>
    <tr>
        <td>998332</td>
        <td>Jonathan</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>345612</td>
        <td>Andrew</td>
        <td>McArthur</td>
    </tr>
    <tr>
        <td>453123</td>
        <td>Adam</td>
        <td>Fuller</td>
    </tr>
    <tr>
        <td>998332</td>
        <td>Tyler</td>
        <td>Watt</td>
    </tr>
    </tbody>
</table>




CSS Table Style 2

Grid Table With Hover Effect

ID First Name Last Name
235312 John Doe
453123 Mark Jones
998332 Jonathan Smith
345612 Andrew McArthur
453123 Adam Fuller
998332 Tyler Watt
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- You can insert the CSS to either the document Head or link it as an external resource -->
<style type="text/css">
    table.table-style-two {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
    }
 
    table.table-style-two th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #517994;
        background-color: #B2CFD8;
    }
 
    table.table-style-two tr:hover td {
        background-color: #DFEBF1;
    }
 
    table.table-style-two td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #517994;
        background-color: #ffffff;
    }
</style>
<!-- Table goes in the document BODY -->
<table class="table-style-two">
    <thead>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>235312</td>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>453123</td>
        <td>Mark</td>
        <td>Jones</td>
    </tr>
    <tr>
        <td>998332</td>
        <td>Jonathan</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>345612</td>
        <td>Andrew</td>
        <td>McArthur</td>
    </tr>
    <tr>
        <td>453123</td>
        <td>Adam</td>
        <td>Fuller</td>
    </tr>
    <tr>
        <td>998332</td>
        <td>Tyler</td>
        <td>Watt</td>
    </tr>
    </tbody>
</table>




CSS Table Style 3

Grid Table With Interchange Row Color

ID First Name Last Name
235312 John Doe
453123 Mark Jones
998332 Jonathan Smith
345612 Andrew McArthur
453123 Adam Fuller
998332 Tyler Watt
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- You can insert the CSS to either the document Head or link it as an external resource -->
<style type="text/css">
    table.table-style-three {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
    }
    table.table-style-three th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #FFA6A6;
        background-color: #D56A6A;
        color: #ffffff;
    }
    table.table-style-three tr:hover td {
        cursor: pointer;
    }
    table.table-style-three tr:nth-child(even) td{
        background-color: #F7CFCF;
    }
    table.table-style-three td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #FFA6A6;
        background-color: #ffffff;
    }
</style>
<!-- Table goes in the document BODY -->
<table class="table-style-three">
    <thead>
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>235312</td>
        <td>John</td>
        <td>Doe</td>
    </tr>
    <tr>
        <td>453123</td>
        <td>Mark</td>
        <td>Jones</td>
    </tr>
    <tr>
        <td>998332</td>
        <td>Jonathan</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>345612</td>
        <td>Andrew</td>
        <td>McArthur</td>
    </tr>
    <tr>
        <td>453123</td>
        <td>Adam</td>
        <td>Fuller</td>
    </tr>
    <tr>
        <td>998332</td>
        <td>Tyler</td>
        <td>Watt</td>
    </tr>
    </tbody>
</table>




Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer
Enmanuel Corvo is a Software Engineer experienced in Web Applications Development. Huge fan of WordPress and an active plug-in author who enjoys writing code and blog posts about anything related to technology.
Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)