Class on Table? - css

Question

Is it not possible to style a <table> and its <tr> <td> using css classes?
For example:
<table class="calendar_table">
<tr>
<td>
<h2>Datum</h2>
</td>
<td>
<h2>Event</h2>
</td>
<td>
<h2>Type</h2>
</td>
</tr>
</table>
Then using something like this CSS:
.calendar_table {
width:880px;
}
.calendar_table tr {
margin:0;
padding:4px;
}

Answer 1

It is possible, it should work properly!
Here is an example
Have fun, you can do whatever you want! I don't recommend using <table>though, unless it is used to present structured data that is meant to be in a table. If it is to draw a layout, use <div> and CSS!

Answer 2

As Aleks wrote, I would define css for the table itself too. But no nested brackets in css definition like: table.custom_class { ... td, th { ... } }.
<table class="custom_class">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Giovanni</td>
<td>Rovelli</td>
</tr>
<tr>
<td>Roland</td>
<td>Mendel</td>
</tr>
</table>
The following CSS example can be used:
table.custom_class {
border:solid 5px #006CFF;
margin:0px;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
line-height:22px;
font-size:13px;
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-weight:400;
text-decoration:none;
color:#0018ff;
white-space:pre-wrap;
}
table.custom_class th {
padding: 20px;
background-color:#98dcff;
border:solid 2px #006CFF;
}
table.custom_class td {
padding: 20px;
border:solid 1px #006CFF;
}
table.custom_class tr {
margin:0;
padding:4px;
}
You can see it in action https://jsfiddle.net/16L9h2ft/

Answer 3

Yes, it's possible. What you have is working to some extent (with tweaks).
To style the td, use:
.calendar_table td {
}
Or:
.calendar_table tr td {
}
will also work.
For setting attributes such as borders, colors, and sizes this is the cleaner way to do it, over embedding that information in HTML.
This approach is great with data tables where the information naturally should be presented in a table. If you are laying out data use more semantically correct tags such as <div> and <span>.

Answer 4

The answers above are either old, or not answered properly, as they are ignoring the styling of the table itself and not just td or th etc. elements.
If we would have a table like this:
<table class="custom_class">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row value 1</td>
<td>row value 2</td>
</tr>
</tbody>
</table>
Then in .css we should put:
table.custom_class {
border: 1px solid black;
td, th {
color: blue;
}
}

Answer 5

Table rows don't take padding, TDs do.
Change your style to:
.calendar_table td {
margin:0;
padding:4px;
}

Answer 6

Tables expand if necessary to let content fit
As far as I know, table rows do not have margin or padding
These layout rules apply no matter how you set it.

Answer 7

Nice looking green table theme :
https://jsfiddle.net/sujayun/qwsLk3aL/
table.namTblCls
{
color:purple;
border: #004400 4px solid;
border-collapse: collapse;
font-size:16px;
}
table.namTblCls th
{
text-align: center;
color:yellow;
background-color:#008800;
border: #004400 2px solid;
padding: 20px;
}
table.namTblCls td
{
text-align: center;
padding: 20px;
border: #004400 1px solid ;
border-right-width: 2px;
border-left-width: 2px;
}
table.namTblCls tr:nth-child(odd)
{
background-color: #DDFFDD;
}
table.namTblCls tr:nth-child(even)
{
background-color: #BBFFBB;
}