Styling a table in html/css

Question

What do you think is the most logical and efficient way to style a table in HTML/CSS? I've seen a lot of people using HTML properties in their code like

<table width="80%" cellspacing="2" border="0">
    <tr>
        <td align="right" nowrap="nowrap">
        </td>
    </tr>
</table>

Wouldn't it be easier to give tables and tds classes/ids and format them in an external stylesheet?

score 1 · Answer 1 · answered Sep 03 '15 at 12:29

1

Not only would it be better, it's the proper way to do this. The code you have now is not something you'd want on a production site.

answered Sep 03 '15 at 12:29

John Halbert

1,320
2
12
23

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

You shouldnt use inline styles: quite good thread (What's so bad about in-line CSS?)
and if you dont like writing class for each, try :nth-child for styling (super useful): http://www.w3schools.com/cssref/sel_nth-child.asp

edited May 23 '17 at 12:15

Community

1
1

answered Sep 03 '15 at 12:28

Lukáš Gibo Vaic

3,960
1
18
30

score 0 · Answer 3 · answered Sep 03 '15 at 12:30

Yes, It would.

However, when HTML was first being built, CSS was not as handy as it is now. With the abilities of CSS today, I would recommend creating the initial layout with HTML tags, and leaving any styling attributes (i.e. align, text wrap, border, etc.) to a CSS stylesheet.

Good Question!

score 0 · Answer 4 · answered Sep 03 '15 at 12:41

0

there are lot of ways by using those you can style your table.

inline Css
internal CSs
External Css(Mostly prefered)
SASS(use Mixin)
LESS
Compass

answered Sep 03 '15 at 12:41

Pardeep Jain

84,110
37
165
215

score 0 · Answer 5 · answered Sep 03 '15 at 13:03

The best and easy way to style a table is using CSS. You can see the example code below;

Code:

<style>
 .my_table{
     border:2px solid blue;
     width:50%;
     padding:5px;
 }
</style>
<table border="1" class="my_table">
 <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
 </tr>
 <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
 </tr>

Styling a table in html/css

5 Answers5