CSS equivalents for attributes

[Jeff Thies]

There's a number of elements that I set attributes for:

<table border="1" cellpadding="3" cellspacing="0">..

<img align="middle">

Are there CSS equivalents for any of these?

Jeff

 

[brucie]

in post: <

There's a number of elements that I set attributes for:
<table border="1" cellpadding="3" cellspacing="0">..
<img align="middle">
Are there CSS equivalents for any of these?

yes

cascading style sheets, level 2 specification
http://www.w3.org/TR/REC-CSS2/

css tutorials and other fun 'n giggly css stuff:
http://www.css.nu/
http://www.mako4css.com/
http://www.richinstyle.com/
http://www.blazonry.com/css/
http://www.w3schools.com/css/
http://www.websitetips.com/css/
http://www.htmlhelp.com/reference/css/
http://www.pageresource.com/dhtml/indexcss.htm
http://www.webpageworkshop.co.uk/main/css_index
http://old.climbtothestars.org/coding/cssbasic/
http://www.htmlcenter.com/tutorials/index.cfm/css/
http://www.freewebmastertips.com/php/content.php3?aid=48
http://www.canit.se/~griffon/web/writing_stylesheets.html
http://www.utoronto.ca/ian/books/xhtml2/exerpt/css-4a.html
http://www.greytower.net/en/archive/articles/tsutsumi.html
http://www.intranetjournal.com/articles/200101/csstutorial1a.html
http://webmonkey.com/authoring/stylesheets/tutorials/tutorial1.html

 

[SpaceGirl]

There's a number of elements that I set attributes for:

<table border="1" cellpadding="3" cellspacing="0">..

<img align="middle">

Are there CSS equivalents for any of these?

Jeff

<table style="border:1px #FFFFFF; padding:3px; margin:0px;">

<div syle="text-align:center"><img src="" alt="" /></div>


--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[SpaceGirl]

<table style="border:1px #FFFFFF; padding:3px; margin:0px;">

<div syle="text-align:center"><img src="" alt="" /></div>

oops: <table style="border:1px solid #FFFFFF; padding:3px; margin:0px;">

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Chris Morris]

There's a number of elements that I set attributes for:

<table border="1" cellpadding="3" cellspacing="0">..

<img align="middle">

Are there CSS equivalents for any of these?

Yes. border, padding, border-spacing and vertical-align.
http://www.w3.org/TR/CSS2/

 

[Chris Morris]

<table style="border:1px #FFFFFF; padding:3px; margin:0px;">

Not quite - cellspacing is duplicated in CSS by border-spacing, not
margin (and even then only if border-collapse: separate is set).

And the padding should be on the tds, not on the table itself, to
duplicate the old cellpadding effect.

<div syle="text-align:center"><img src="" alt="" /></div>

And 'align="middle"' on an image is vertical not horizontal alignment.

 

[Pierre Goiffon]

<table style="border:1px #FFFFFF; padding:3px; margin:0px;">

I don't think the border="1" would be exactly reproduce by your border:1px
#FFFFFF; : this will just add a border around the table, not around each of
the cells...

 

[Stan Brown]

oops: <table style="border:1px solid #FFFFFF; padding:3px; margin:0px;">

oops: "0px" is unnecessary; use "0".

oops: #FFFFFF is white. I think you want #000 if you're trying to
match <table> attributes.

The bigger issue is that probably padding should be in ems not
pixels. Otherwise, why use CSS at all when the <table> tag is
already the way he wants?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

 

[DU]

There's a number of elements that I set attributes for:

<table border="1" cellpadding="3" cellspacing="0">..

<img align="middle">

Are there CSS equivalents for any of these?

Jeff

table {border: 1px solid black; border-spacing: 0px;}
td, th {padding: 3px;}
img {vertical-align: middle;}

Note that MSIE 5.x and MSIE 6 do not support border-spacing. So, until
the next upcoming MSIE 7 fixes that, you should either use
cellspacing="0" or add the declaration border-collapse: collapse; to
your CSS rule (for table) if you want to collapse borders.

DU

 

[SpaceGirl]

oops: "0px" is unnecessary; use "0".

oops: #FFFFFF is white. I think you want #000 if you're trying to
match <table> attributes.

The bigger issue is that probably padding should be in ems not
pixels. Otherwise, why use CSS at all when the <table> tag is
already the way he wants?

Yes I know what colour white is thank you. And the px *might* be
unrequired for zero values, but it's better than missing them off for
possive / negative values The OP was an obvious newbie, so I was
trying to make it easier...

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Dylan Parry]

oops: "0px" is unnecessary; use "0".

The specifications clearly state that units are _optional_ when a zero
value is given. I'm sure you know the meaning of the word "optional" and
understand that it is not incorrect to specify units in a zero case.

 

[DU]

oops: "0px" is unnecessary; use "0".

The "px" in "0px" might be unnecessary but for 2 reasons I would
recommend to add it even in such case:

1- readers of this post (not fully aware of strict error conditions in
CSS1) might think that "px" is optional and not adding it works anyway
in MSIE 5.x and MSIE 6 in backward compatible rendering mode. The truth
is that writing "px" is *only* optional for zero-length value. You can't
be wrong - whatever the browser, whatever the browser version, whatever
the rendering mode - if you always mention the length unit.

2- if you ever or later change the value from 0px to, say, 4px, then the
px string is already written. So, you won't forget to add it and you
won't need to write it. This is a good coding practice to adopt, just
like using curly braces even for single instruction.

DU

 

[Neal]

2- if you ever or later change the value from 0px to, say, 4px, then the
px string is already written. So, you won't forget to add it and you
won't need to write it. This is a good coding practice to adopt, just
like using curly braces even for single instruction.

When may we omit the curly braces around a style rule again?

Did you mean the semicolon?

 

[Dylan Parry]

When may we omit the curly braces around a style rule again?

When used inline

Did you mean the semicolon?

I'm sure he did.

 

[DU]

When may we omit the curly braces around a style rule again?

Did you mean the semicolon?

No. I meant the controlled statement of a if instruction. Sorry if I was
not clear in my post (re-edited in a hurry). E.g.:

1)
if(boolean condition)
single statement

is a perfectly correct javascript instruction. And

2)
if(boolean condition)
{ single statement };

is also a perfectly correct javascript instruction.

The 2) example is a much better coding pratice. If I ever need to add
another statement, then the block code delimeters are already written.
If I don't ever need to add another statement, then the curly braces
help code readability.

Semi-colon are also another example of good coding practices: they help
code readability everywhere applicable as syntaxical separators in
javascript for statements and in stylesheets for CSS declarations.

DU

 

[Karl Groves]

There's a number of elements that I set attributes for:

<table border="1" cellpadding="3" cellspacing="0">..

<img align="middle">

Are there CSS equivalents for any of these?

Jeff

C'mon, Jeff. These kinds of posts are gonna get you killfiled. Get your
ass some books or something. It is one thing to ask a legitimate
brain-burner of a question, but when your post reflects that you've
obviously not bothered to do your own homework, people get pissed.

-Karl

 

[Brian]

For some odd reason, there's been a slew of partially correct
responses in this thread, and more heat then I'd expect from such a
simple question. Being foolish, I now stick my head in the lion's mouth.

There's a number of elements that I set attributes for:

<table border="1" cellpadding="3" cellspacing="0">

<table cellspacing="0">
<!-- cellspacing is still required for IE 5.x Mac, which does not
recognize CSS border-spacing or border-spacing property -->

table {
border-collapse: collapse;
/* this will cause adjacent borders in table
to 'collapse' into one border */
}

td {
border: 1px solid black; /* borders around each cell */
padding: 3px; /* padding within each cell */
}

<img align="middle">

table img { /* assuming this image is inside the table */
vertical-align: middle;
}

And now, I wait to be shown how *I've* screwed up. Here's a preemtive .

 

[Jeff Thies]

C'mon, Jeff. These kinds of posts are gonna get you killfiled. Get your
ass some books or something. It is one thing to ask a legitimate
brain-burner of a question, but when your post reflects that you've
obviously not bothered to do your own homework, people get pissed.

Well I've had my share of stupid posts. The earlier in the morning the
more likely. I'm more than a bit overextended.

It's not a trivial question although it seems that way. There's nothing
in CSS1 about tables. CSS2 support is more limited.

And as it turns out cellspacing is not obvious as it requires
border-collapse and border-spacing. Two properties that are not reliably
supported. That makes table borders in CSS a bit shaky.

Also, there appears to be no equivalent to <img align="middle"> The
obvious vertical-align: middle is a table cell thing.

Look at how far afield SpaceGirl had gotten by thinking these were
trivial (no offense meant).

Having said all that, I'll bear your advisory in mind.

Jeff

 

[David Dorward]

Also, there appears to be no equivalent to <img align="middle"> The

Given that "middle" isn't an allowed value for the align attribute, I'll
assume you mean "valign".

obvious vertical-align: middle is a table cell thing.

'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements

Not just a table cell thing.

 

[Jeff Thies]

Jeff Thies wrote:




Given that "middle" isn't an allowed value for the align attribute,

That's odd, not only does it work but google yields pages of uses. I
don't doubt that you are right though. I've never had a need for it
until this moment.

I'll
assume you mean "valign".

'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements

Not just a table cell thing.

My mistake. I had been through this with block level elements (which
don't do vertical-align) not long ago. I see this is even in CSS1 which
I find a 100 times easier to read.

I'll crawl under a rock for a while...

Jeff