Is it ok to use cellpadding="2" cellspacing="2" in <table>? Or are these not recommended by W3C and not right according to web standards?
What are alternatives in CSS?
Update: and is it also ok to use <td align="right" valign="top">?
My question is in terms of separation of content and presentation and W3C recommendations.
Update:
According to this chart in <table> only align and bgcolor are not allowed in Strict version. So is it ok to allow other properties of <table>?
alt text http://shup.com/Shup/293811/11021055643-My-Desktop.png
No, the attributes are not officially deprecated but they are generally frowned upon, since you should use CSS for presentation.
For cellpadding you can easily replace it with padding in CSS:
table.classname td {
padding: 4px;
}
For cellspacing, first decide if it's really necessary. If you don't have any borders on the table cells, or you don't want spacing between the borders of each cell then it isn't. (Personally I think cell spacing looks bad design-wise, but it may be useful in some circumstances.)
It's quite nice to do this:
table {
border-collapse: collapse;
}
Then each table cell shares the border with its neighbour, meaning you can add, say, 1px top and bottom borders and you just get 1px separating each row.
To separate borders, however, you can use this CSS, though it probably doesn't work in IE6.
table.data td {
border-collapse: separate;
border-spacing: 4px;
}
While it's technically fine, it is strongly not recommended.
Imagine if your site had many tables across many pages and you wanted to change the padding or the spacing for one reason or another. Well, you would have to go through your entire site and make the changes.
Or you can use CSS and change your entire site by changing a line of code in one location. This is not only far more efficient, but its easier, helps you avoid mistakes, and keeps you consistent.
<style type="text/css">
table td { padding:10px; margin:10px; }
</style>
If you want to use some tables with padding and margins and others without, you can create classes in your CSS by adding a "." before a name of your choice:
<style type="text/css">
.myTable td { padding:10px; margin:10px; }
</style>
<table class="myTable> etc...
Note that class names are case sensitive. There are also many other attributes you can have fun with like border, background-color, etc...
In short, while cell-spacing and cell-padding attributes are not deprecated, its far better to use CSS for ease and consistency across your site.
<style type="text/css">
table.padded-table td {
padding:10px;
}
</style>
The cell-padding and cell-spacing properties are still fully supported. Although some people will tell you to do it with CSS setting padding and margin on the table cells, this is still the easy way to have it applied to every cell in a table.
If you want a list of properties and which ones are deprecated, I find w3schools to be the most reliable source of information.
w3schools: td tag
w3schools: table tag
Related
I'm having some trouble with some CSS. I have a number of unique tables with a similar format name, and I need to set the background color on some of them. However, if I try and use a wildcard the style gets overwritten by a parent CSS file.
The background colour here works fine:
#AllProtectedServers1 td.status.online{
color: green;
background-color: yellow;
font-weight: bold;
}
But the background colour doesn't work here as it's being overwritten higher up (although everything else does):
td.status.online {
color: green;
background-color: yellow;
font-weight: bold;
}
I'm going to have 20+ tables all starting with "AllProtectedServers", so naming them all individually is going to make the css huge. Is there anyway I could use a wildcard? I've tried using div[id^='id_'] and similar selectors without any luck.
Anyone have any ideas of what I could use instead?
Update:
Please note the ID's are unique (AllProtectedServersCompany1, AllProtectedServersCompany2, etc), but they all start with AllProtectedServers. I want to create some CSS that will override the stylesheet for the table that is overriding my changes and use a wildcard so I don't have to specify each one.
Maybe this would help:
td.status.online
{
color: green;
background-color: yellow !important;
font-weight: bold;
}
Alpipego's comment is not correct. You're perfectly fine using ID selectors (#) for CSS. These can be overwritten by other ID selectors of the same or higher specificity (depending on page order) or the !important rule.
However, you want to avoid using !important as a CSS rule because that can back you into a corner and become a maintenance nightmare.
As a matter of fact what you need to learn about is CSS Specificity. I recommend reading the CSS: Specificity Wars for an entertaining but educational overview of how CSS Specificity works.
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Smashing Magazine also published an article on it that's more extensive:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You do want to be careful about not going crazy with specificity. ID's are (supposed to be) unique per page, so if you end up with a lot of deeply nested rules (#foo .bar .baz .goo), you're probably looking at needing some refactoring.
So, if you use Chrome, pop open the developer tool and look at the CSS selector and determine the specificity. All you need to do is:
a) Match the specificity but make your style come later in the DOM page order
or
b) Use a higher specificity
That's all there really is to it.
I hope that helps!
Cheers.
jmbertucci's answer is quite correct, if perhaps a little incomplete, I will expand with some examlpes.
One of the most overlooked aspects of CSS is specificity rules. As mentioned by jmbertucci please see:
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
A little more googling will present a wealth of articles for you.
Let's take some base html and css and a bit of a guess as to what you have.
HTML
<table class="myTable">
<tr>
<td class="status online">Online</td>
<td class="status offline">Offline</td>
</tr>
</table>
CSS
table.myTable td.status
{
background-color:#fff;
}
td.status.online
{
background-color:#f00;
}
Fiddle
This will result in a white background for "online" as table.myTable td.status is more specific than td.status.online.
In this example we need to make the second selector more specific. As you mentioned adding an ID results in what you want as IDs have an extremely high specificity score and a very hard to over-write. So much so that some say never to use them*. A simple solution in this example is to add table to the seconde selector.
table td.status.online
{
background-color:#f00;
}
This results in a red background for "online"
Fiddle
Adding table may not work in your instance. YOu need to find the style rule that is being applied using Chrome Developer Tools or Firebug for Firefox and create a rule that is more specific.
If you provide more information I may be able to provide a more specific answer.
* A note on ID's ID's extremely high specificty is both their strenth and weakness. I believe they can be used, but with caution. If you want to style a specific part of a page in a specific manner, you may have a canditate for ID. Think along the lines of a header and footer before the days of HTML5. Another good example may be <section id="discalimer">, using an ID provies two benifits: it's an anchor for specific styling and it can be linked to, e.g: Disclaimer. A further read: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/
Keep in mind the arguments on weather to use IDs or not are a matter of optinion and their are good points on both sides. W3C, the standards guys, has no stance on this. If where you work has a coding guide, stick to that mandate. If you're unsure, don't use them in CSS to be safe. Most importantly keep IDs unique.
Andy68man, no wildcard needed, just use a class. Same class for all the tables if they all share the same properties. As in (first the HTML):
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers"> ..... </table>
<table class="allProtectedServers secondClass"> ..... </table>
and the CSS:
.AllProtectedServers td.status.online { ... }
If there are one or more properties that only some of the tables have, create another class and give those particular tables both classes, as in the third line of HTML above.
Alternatively, if that still gets overruled by the CSS above, put a single div round all the tables or even the whole page (or there may already be one), give the div an id, and add that into your selector to increase it's specificty (your first bit of code above shows the extra id will be enough to overrule the other CSS that's causing your problem):
#myDiv td.status.online { ... }
How can I style the first-child AFTER a page break has occurred?
The ultimate situation I'm facing is that I would like to style the first row of a table differently, and when printing the table spans multiple pages. I successfully used :first-child to style the first row. I also successfully avoided page breaks inside rows. I can not figure out how to style the first row on the second page of the table, though.
I'm familiar with the css pseudo class first-child (http://www.w3schools.com/cssref/sel_firstchild.asp), and I'm also familiar with the css print property page-break-inside (http://www.w3schools.com/cssref/pr_print_pagebi.asp). I'm unable to get them to play nicely together?
EDIT:
Adding code sample
HTML:
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
CSS:
table tr:first-child td { border-top: solid red 2px; }
table tr { page-break-inside: avoid }
Okey, direct answer — you can not do that as how you want.
Edit: oh, looks like I answer for a little more complicated question like "how to add table header on each printed page", but, anyway the way of solution is the same. Hope it's ok.
But there is several tricks to do what you want.
1) Break table in several parts, add thead part to each of them and remove margin, so it will looks like just one table. Add in css something like:
table {
page-break-inside: avoid;
page-break-after: auto;
}
table + table thead {
display: none;
}
Also do not forget to set td width, cause tables without thead can have different width's.
After that add print styles:
#media print {
table + table thead {
display: table-column-group;
}
}
Yep, there is a chance for duplicate headers on page, but it still better than nothing. And if you find good number of lines for your project it will looks as you need
2) Prepare dedicated downloaded printable version of page with WKHTMLTOPDF, for example. So you can catch page breaks well, and add what you need. This option give max flexibility of output, but will take some time for support.
3) Calculate everything with JS. Print your page and analyze it — add some constants to js (height per page), and, when someone try to print — calculate page breaks, find closest element and add what you need.
Hope you got answer.
Have a nice day.
I was also looking for a way to apply styles to only the first and last rows of a table over a page break, but maybe for a different use case.
I needed to give my whole table a border, but not on the table rows, just the outside. The easy way is to add a border to the table, but when a page break occurs, the borders aren't redrawn at the break.
My solution was to use a thead and tfoot, as these elements are repeated at every break. This gave me a full border around the table that obeyed page breaks.
You can modify this technique for your circumstances. Say if you wanted to change the styles of just the first row (and have it be consistent across page breaks), you just put that row in the thead or the tfoot depending on if you want the first or last row. You can even do this with an existing thead. Just give each thead tr a class so you know which is the main header, and which is a styled row.
There were a few caveats. The table footer had to have something within its tds otherwise it won't render. I added a (which means "no breaking space") to the first td and then set the font-size on the td to 1px (Otherwise there will be a noticeable gap at the bottom of your table). The font size has to be applied directly to the td. A font size of 0 will not work either. It has to be non-zero.
Example
This example is for my use case, but you can modify it. You can also use as many columns as you want. I used one for simplicity. The thead and tfoot must have the same number of columns though.
.my-table tr {border-left: 1px; border-right: 1px;}
.my-table thead {border-top: 1px;}
.my-table tfoot {border-bottom: 1px;}
// must be applied to the td!!!
.my-table tfoot td {font-size: 1px;}
<table class="my-table">
<thead><td></td></thead>
<tbody>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</tbody>
<tfoot><td> </td></tfoot>
</table>
I have a website created by a designer entirely in a table format. I am embedding another table within its cell, the thing is my table has its own stylesheet. When I link mine externally, the entire site get warped. All I want is my Stylesheet to work on my table.
How do I include this stylesheet without causing a conflict or override on the entire site?
If there's no better option, then give your table an id or specific class. Then use this in all your CSS declarations, ensuring the styles within will apply to only your new table. This article explains the idea of pseudo-namespacing further, which is worth considering.
So instead of:
td { border: 1px solid black; }
You would have, e.g.:
.myClass td { border: 1px solid black; }
There are two kinds of things to take care of: 1) preventing your style sheet from affecting the table used for formatting the entire table, and 2) preventing the formatting of that table from affecting your table. Your style sheet must be modified for this.
Start from assigning a unique id to your table and then using the corresponding selector in all rules of your stylesheet (see Rob W’s answer). This suffices for 1). It mostly suffices for 2), too, but not always. You should test it and have a look at the overall style sheet. There is no quick way here.
To illustrate the problematic point, suppose that you want your table to have borders around cells. For this you could have table#foo td { border: solid; }. But if the overall style sheet has td { border: none !important; }. That’s not good practice, but such things are used; authors often use !important for no good reason. In this case, if the overall style sheet cannot be changed, you would need to use !important in your style sheet, too. In extreme cases, you might even need to use !important and write selectors so that they are more specific.
Suppose I have something like this:
<table class="myTable">
<colgroup span="2" /><colgroup span="2" />
<tr><td>........</tr>
And so on...
Then on the stylesheet:
table.myTable colgroup
{
border-right: solid 5px #ffffff;
}
The point being that I want some space to separate colgroups in my table.
It's working fine in Firefox and IE8. I already read everywhere that IE7 does not implements borders for colgroup, but here is a call to your imagination and creativity, does anyone have an idea of how I could achieve a similar result in IE7, without adding a class to every cells or generating empty cell...
Here's an exemple of the result in Firefox 4 : http://imageshack.us/photo/my-images/853/capturezz.png/
The headers generated can be litterally of any form, some case are really complex. This is why the colgroup solution is interesting, since it is quite simple to calculate the needed span.
Every suggestions will be appreciated.
Don't have much experience in IE7, but this might work:
You can check if it is possible to set a background-image. And align that image (with the desired color) to the right side of the cell, making some kind of a fake border look.
In chrome setting a border on a colgroup doesn't work eighter. Setting a background-image does work.
Greetz,
XpertEase
In order to use the border property in tables, you must set the following rule. If not you wont get them
table {
border-collapse:collapse;
}
Then you will get borders working as you pretend
I would like to have all cells in a with "vertical-align:top" style. For technical reasons outside my control, I cannot define a new class, or change the stylesheet at all; nor can I set "style" for individual cells, or even rows. All I can do is set the "style" attribute of the <table> element itself.
Using <table style="vertical-align:top"> fails -- apparently, it sets the alignment of the table within its own context, not of individual cells inside it. Is there any other alternative that I'm missing?
You can use css
table tr td {
vertical-align: top;
}
No, as far as I can see there is no way to do this without some form of access to either the td itself or a style sheet.
Can you apply a workaround like this one? It's not pretty and invalid according to the W3C, but should nevertheless work in all browsers:
<style type='text/css'> table.topalign td { vertical-align: top } </style>
<table class="topalign">
....
Set the "classic" HTML valign attribute on the table. The value will be inherited by the cells.
<table valign="top">
…
See Tables, Table formatting by visual user agents, Horizontal and vertical alignment in the HTML 4 spec.
table tr {valign: top}
In this case you don't need to use css class.