What do I code if I only want left/right cellpadding, and no padding on the top/bottom?
Originally posted by AviationForum
What do I code if I only want left/right cellpadding, and no padding on the top/bottom?
Use a stylesheet:
<style type="text/css" media="screen">
td {
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
</style>
–Vinnie
or, if you want to just apply it to a few elements you can use inline styles like this:
<td style=“padding-left:5px;padding-right:5px;”> </td>
Fwiw…
Originally posted by renedox
or, if you want to just apply it to a few elements you can use inline styles…
You can, but imho it’s probably better that you don’t.
It’s a good thing to keep markup and css as untangled as possible.
For that reason it’s best (imho) to avoid inline css in favour of gathered css (external or embedded) which can be implemented by attaching classes to the element.
This means there’s no need to put your hands in to the belly of the beast when making changes to the css of multiple (or even single) elements.
Imho, the best option would be somewhere between the above solutions (while arguably being a little more ‘efficient’ than both). 
<head>
<style type="text/css">
.myClass {
padding: 0px 5px;
}
</style>
...
<body>
<td class="myClass">...</td>
I’m a fan of using css shorthand when possible as shown in the above example.
When using just two values with the padding property the first is used for padding-top and padding-bottom, while the second value is used for padding-left and padding-right.
For more info on the padding properties (incl. shorthand) check out the W3Schools’ pages here and [url=http://www.w3schools.com/css/pr_padding.asp]here.
Yes but I said, only if you want it for a few (like one or two) because I don’t see the point in classifying a class for just one or two td’s :S
Originally posted by renedox
Yes but I said, only if you want it for a few (like one or two) because I don’t see the point in classifying a class for just one or two td’s :S
And if those one or two TD’s were in your navigation and on 100 different pages?
What if you wanted to change them 3 months down the road?
If all the CSS is applied with classes then you can edit one single file to make any necessary changes across your site. Your pages are smaller since the CSS will be cached amd it will be easier to maintain. Sounds like a win-win situation.
You are correct in that using a class for one unique element is overkill… I would use ID.
Originally posted by renedox
Yes but I said, only if you want it for a few (like one or two) because I don’t see the point in classifying a class for just one or two td’s :S
If classifying for one, then just use an ID!
#myCell {
padding-left:5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
<td id="myCell">
Also, I didn’t use shorthand because I feel (especially with padding and margins) that it can confuse those who are just learning CSS.
–Vinnie
Not splitting hairs, just curious about the mindset…
Even in the case of it being a uniquely affected element I personally would still be inclined to use a class rather than an id.
Although IDs are indeed meant for uniquely referenced elements I see no advantages to using an id-based css set over a ‘one-off’ class-based set when it comes to applying css style attributes.
Maybe my methodology is affected by the fact that I play around with javascript. In practice I tend to reserve the use of IDs for those elements that will be referenced via the dom (or other handler scripts).
Even in the case of simple styling I would only be inclined to apply css via an element’s ID in the case of divs as they are most likely to be uniquely identified and referenced.
Imho, giving a table cell* an ID is no less overkill than giving it a ‘use-once’ class (perhaps even moreso than a class).
The code footprint is identical and (even despite the ‘intended’(?) use of IDs for uniquely styled elements) to my mind it makes no less sense to use a class.
If anything, using a one-off class is the better option as it means that the code is more open to development in future editions. A class-based attribute set has the flexibility to be re-used on other elements later whereas the ID doesn’t (or rather- it does, but multiple instances are not something it was meant for and not something it does well).
Afaik, creating a unique id to style a table cell* has no practical or methodological benefits over using a class in this or any comparable situation.
(* or any other element not required to be available to the DOM.)
Are there any benefits to using an id in this situation that I’m forgetting? It’s not beyond the realms of possibility that I’m missing something blaringly obvious.
Originally posted by vgarcia
[B]
If classifying for one, then just use an ID!
#myCell {
padding-left:5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
<td id="myCell">
–Vinnie [/B]
Where do I put the code? Do I just cut and paste that into the document? Or do I embed it in a <style> tag?
Originally posted by AviationForum
[B]
Where do I put the code? Do I just cut and paste that into the document? Or do I embed it in a <style> tag? [/B]
#myCell {
padding-left:5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
goes in your <style></style> tags or in your stylesheet,
and
<td id=“myCell”>
goes in your code 
you could still keep it shorthand and put all the values down so no-one gets confused:
#stylie { padding: 0px, 5px, 0px, 5px}
how’s that?