OK. One minute.
table {
border:10px inset cyan;
}
td {
border:1px solid #888; /* your color of choice */
}
If you want fancier borders, they require more CSS styling.
I swear to god this Discourse format drives me nuts. I hate it.
Yes RP, that is it exactly: getting two types of borders to make nice within CSS so I don’t have to repeat their properties for every single table.
ahhh! the td tag! Okay let me go try it.
scratch that: I did place the style in my CSS, here:
th, td {
border: 2px;
padding: 10px;
Or, as I mentioned, if you want the conventional, somewhat dimensional, table border format, then apply:
<table border="1" ...>
Please read about the border property and shorthand.
{border:1px solid #888;}
You did not give a color or style. Width and Style are required.
Okay. But the other styling is okay? I just need to add a color and a style? Should I remove the padding: 10px; ?
Beats me. If you want/need the padding, keep it. If you don’t, don’t. Your choice. By defaut, table cells come with 1px of padding. Some coders keep it, some increase it, most zero it to start with and add padding selectively as needed. Depends on your needs.
Alright now I have the interior borders, but not the table’s CYAN frame. Here in its entirety is my styling:
<style type="text/css">
.hiheux_oddChild {
background-color: #FFFFDB;}
p {height: 100%;}
H1 {
COLOR: CRIMSON;
font-family: PRESTIGE12 BT, MONOSPACE; font-weight: bold;
text-align: LEFT; font-size: 30px; line-height: 30px;}
H2,H3,H4,H5,H6 {
COLOR: #006666;
/* COLOR: CYAN; */
font-family: PRESTIGE12 BT, MONOSPACE; font-weight: bold;
text-align: CENTER; font-size: 30px; line-height: 30px;}
body {
font-size: 16px;
line-height: 16px;
font-family: PRESTIGE12 BT, MONOSPACE; font-weight: bold;
/* font-family: LettrGoth12 BT, Bold, MONOSPACE; */
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 100px;}
th, td {
border: 1px SOLID #888888;}
}
table {
border: 10px INSET CYAN;
border-collapse: collapse;
column-span: 5; /* See Addt’l Browser Compatibility below */
width: 100%;
margin-top: 50px;
border-collapse: collapse;
padding: 8px; /* INSIDE the border of an element */
cellspacing: 4px; /* OUTSIDE the border of an element */
font-family: PRESTIGE12 BT, BOLD, MONOSPACE;
/* font-family: LettrGoth12 BT, Bold, MONOSPACE; */
margin-top: 30px;
margin-bottom: 10px;
-webkit-column-span: 5; /* Safari & Chrome */
-moz-column-span: 5; /* Firefox */
-ms-column-span: 5; /* Internet Explorer */
-o-column-span: 5; /* Opera */
}
<!--<td valign="top">followed by</td>-->
<!--<td valign="top">some other damn thing</td>-->
<!--<td valign="top">and one more just to prove it.-->
<!-- OTHER PADDING OPTIONS -->
<!-- padding: 2%; -->
<!-- padding-top: 12px; -->
<!-- padding-right: 12px; -->
<!-- padding-bottom: 12px; -->
<!-- padding-left: 12px; -->
sup {
color: CRIMSON;
font-size: 20px;
font-weight: BOLD;
vertical-align: SUPER;}
a:link {color: BLUE;}
a:visited {color: DODGERBLUE;}
a:hover {color: CRIMSON;}
a:active {color: INDIGO;}
<!-- ==============ALTERNATING ROW COLORS in IE=========================================== -->
</style>
Is that intentional? or are you stating that as a problem?
A problem. I want both borders to show.
You need to correct two errors.
(1) Delete all HTML comments from within the CSS. CSS doesn’t recognize them and they corrupt the CSS.
(2)
th, td {
border: 1px SOLID #888888;} /* DELETE the closing curly brace. You only need the one on the next line. */
}
Also, change:
table {
border:10px inset cyan; /* CHANGE inset to ridge */
}
The good news is that now both sets of borders work. The bad news is that none of the padding shows up. I’ll fool around with it a bit . . .
Be specific, please. What padding are you referring to?
(You do have errors in the CSS.)
You mean that double top margin? I just caught that (also the < er BR>s). The problem is that the content jams right up against the border. I’ve moved the padding line to the top to make it easier to see. Here’s the two table blocks:
th, td {
border: 1px RIDGE #888888;}
table {
padding: 20px;
border: 10px INSET CYAN;
column-span: 5;
width: 100%;
border-collapse: collapse;
font-family: PRESTIGE12 BT, BOLD, MONOSPACE;
margin-top: 30px;
margin-bottom: 10px;
-webkit-column-span: 5;
-moz-column-span: 5;
-ms-column-span: 5;
-o-column-span: 5;
}
I don’t believe it. It’s a world record for me: I had to add the 20px padding to the th, td blocks as well, and it shows up beautifullly.
th, td {
border: 1px RIDGE #888888;
padding: 20px;}
table {
padding: 20px;
border: 10px INSET CYAN;
column-span: 5;
width: 100%;
border-collapse: collapse;
font-family: PRESTIGE12 BT, BOLD, MONOSPACE;
margin-top: 30px;
margin-bottom: 10px;
-webkit-column-span: 5;
-moz-column-span: 5;
-ms-column-span: 5;
-o-column-span: 5;
}
You can delete the 20px of padding on the table. Since borders are collapsed, it isn’t contributing anything.
You can also change the th,td border from ridge to solid, again for the same reason. (I think you transcribed my recommendation to the wrong elements.) My recommendation was useless, anyway, because now borders are collapsed. Funny how things affect each other, isn’t it.
The following CSS properties can be deleted because they don’t exist:
column-span: 5;
-webkit-column-span: 5;
-moz-column-span: 5;
-ms-column-span: 5;
-o-column-span: 5;
colspan is an HTML <td> attribute. Not a table attribute and definitely not a CSS property.
I prefer RIDGE which renders a modest 3d effect (on both FF and Chrome).
I can’t remove the padding because:
- it removes the cyan table frame
- it jams all content against its cell borders
In fact I don’t follow your logic about removing the padding declaration in the first place. Why would my table vest padding on its own, let alone know how much of it I want?
Please read my text carefully and do not confuse table padding with th,td padding.
I am trying to be careful how I identify the various items, but apparently I’m not being careful enough. Or possibly your code is different from mine already.
table {
padding: 20px; /* this is the padding that can be deleted because with borders-collapsed it is collapsed, too. */
Before I forget, that wasn’t JQUERY you helped me with, it was >nth-child, and if you haven’t figured out by now . . .
It’s all geek to me!
I can’t follow your explanation RP. We agree that we don’t want cell content jammed up against its borders, correct? Or is that how you think I want it? I DON’T.
I want the content to have padding — or whatever you wish to call it — around it so it isn’t jammed up against its borders.
Now I did learn something useful: I don’t need the padding to be declared in the TABLE { declaration if I have it declared in the table’s th, td { style. I just tested this out by increasing the table’s padding to 40px and it had no effect6.
And I stated above: Take out the padding and you get a very ugly table.
Can you show me a screen shot of what you see, please? And send me a fresh copy of your CSS. I’d like to figure this one out before we lose the light (figuratively).
Just to clarify, th,td {padding:20px} /* or whatever value you wish */ is the correct way to apply padding to the table cells.