Styling TABLE sub-elements?

HTML & CSS
1

As I gain more experience with CSS I keep discovering elements that can’t be styled. This is not that particular effects cant be done, is just that despite you having a tag present in the mark you just can’s apply a style to it. You just cant change the image of an input with type checkbox, for example.

Experimenting along these lines , it seems many table elements cant be styled. Actually, it’s more complex than that… TABLE, TD, TH seem to behave as “general” elements do for the most part (TD and TH… don’t seem to take margin, for example)… Then there are attributes that some table elements seem to take, but not to apply to themselves, or actually are just simply counter intuitive. TRs for example don’t seem to take: margin: or border:, among other things. BG are kind of a hybrid… the TR itself doesn’t seem to have the BG but rather bequeaths it to its TD children … I mean you would expect a TR to be a wrapper element around TDs, which means if you were to give the TD a background and have the TDs at some distance from each other ( via border-spacing, for example)… that you should be able to see the the BG contained in the TR…) I am sure all of this is verbosely mentions in the specs

So… what is my ramble about exactly? It would be nice if there was or if someone could give a link to a CONDENSED reference or resources that list exactly which CSS attributes can be applied (directly and not that they are bequeathed to the TDs) to each table element in it normal display mode… much the same way there resources out there that list ( in tabular format , ironically enough) what browsers support what CSS attribute. If anyone has a link or a reference…or even a personal list they have compiled I would greatly appreciate it . :slight_smile:

2

Can I beg to differ?

For the rest, I don’t know, one can conclude only per concrete example.

3

yeah the <input type=“checkbox”> will always look like a [/] or … even if you change it’s background and size properties…

but let me focus on tables for now. and keep in mind my question is indeed THEORETICAL… that is, I am trying to ascertain what elements can be styled directly… … achieving the effect by nesting DIVs, or using AP in not the point and is not whats driving my curiosity this time.

Lets say I had this simple markup


<table>
 <caption>hey I'm a caption.</caption>
  <colgroup class="first"></colgroup>  
<colgroup ></colgroup>
  <colgroup></colgroup>
  <thead>
  	<tr><th> data</th><th> data</th><th> data</th></tr>  
  </thead>
  <tfoot>
	<tr><td> data</td><td> data</td><td> data</td></tr>
  </tfoot>
  <tbody>
       <tr><td> data</td><td> data</td><td> data</td></tr>  
       <tr><td> data</td><td> data</td><td> data</td></tr>
       <tr><td> data</td><td> data</td><td> data</td></tr>
       <tr><td> data</td><td> data</td><td> data</td></tr>
       <tr><td> data</td><td> data</td><td> data</td></tr>
</tbody>

</table>

now for STARTERS… lets apply this CSS:


caption {caption-side:bottom; background:orange; padding:10px; margin-top:20px; border:1px solid green;}

thead{ padding:10px; margin:10px; background:pink; border:5px dotted blue}

td, th {background: none; border:none;}
table {border:2px solid red;}

The THEAD didn’t take the following styles: PADDING, MARGIN or BORDER and the background of the THEAD is ONLY VISIBLE WHEN ITS PART OF A TD ( so it appears interupted)… I know for a fact that I cant just relative position a TD … for another example…

In contrast I can apply any attribute to CAPTION that I can apply to a DIV.

Restating my Q again… it would be nice to have a comprehensive list of which attributes can be given to elements such as : THEAD, TBODY, TFOOT and TCOL and TR

4

No, <input type=“checkbox”> will NOT always look like a [/] or :slight_smile: CSS changes all that.

But I’m not sure what your point was: that you can’t style a check box, or that you will not style a check box. Because check boxes CAN be styled so that they will look as such that their mother won’t recognize them ever :slight_smile:

Regarding tables, if your question is theoretical, then it’s not of much use.

5

well I dunno how to style a checkbox… example:
<input class=“x” type=“checkbox”> , .x{ display:block; background: orange;} does NOT in anyway change the appearance of the check box ( thus to my knowledge it can’t be styled, by CSS alone at least)

My question was simply to get a list of what TABLE elements wont take certain styling instructions, knowing that would be VERY useful.

6

No, no it doesn’t. It’s OS-specific, and without Javascript, you aren’t changing the foundations of what a checkbox (or radio button, or some features of a select box) look like.

You aren’t. Period.

7

Thats exactly what I am saying, Karpie.

But also there are other HTML tags, that do not seem NOT take style ( tho not because they are OS specific)…

8

Yes, yes, yes, you CAN !!!

I don’t think you’re on the same CSS planet! :slight_smile: No CSS changes the foundations. But it changes the style. And you most definitelly CAN style it a different style than the default OS. As you style textbox for example, another OS-specific. No need for JS. But I guess you need to know a bit more CSS, right? :wink:

Off Topic:

This “Period” thing, get rid of it, please. I don’t respond well to such things, especially when defending wrong points. Please. And it can also be embarassing for you when you are going to ask for a CSS example and I will give it to you :slight_smile:

9

Here’s a few tips :slight_smile:

Yes you can read the specs to see what elements properties can be applied.:slight_smile:

For margins you can see that.

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

Col and Colgroup only allow the following:

  • border
  • background
  • width
  • visibility

More info here.

IE6 and 7 won’t style the border though but will style color instead :slight_smile:

You can add borders to tr elements but you need to be in the collapsing border model. IE6 and 7 don’t honour this though although you can add background colors to them.

IE6/7 seem to inherit table images into table cells. Setting background:none on the table cell seems to fix it.

If you have doubt about a property then just go to the w3c spec for that property and it will (usually) list what elements it applies to.

Some other useful links:
http://www.w3.org/TR/CSS2/tables.html

10

Paul:

thanks as always for your response. It is in fact the specs page itself that is confusing me.

I wish the w3.org table specs were organized by TAG, like what you pointed out for COL group/COL for example… which is what is making this task so difficult for me.

for example… the specs say this about the property: “top:”

For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).

But obviously, without changing the display: of a table element, relative position ( which is listed to applying to ALL ELEMENTS, BTW) … position relative and Top:100px will have NO effect.

Another of the many things I find confusing is understanding not what border-spacing does… but WHY… and thus limiting how I can to anticipate or judge how to create technique for the designs I would want to make.

http://www.w3.org/TR/CSS2/tables.html#table-layers

I would have assumed that if i gave a TR an image background, and the TDs a different image background and gave the table border-collase:separate… that i would have been able to see the TR’s background image ( the same way as it would work with other nested elements)…

I suppose border collapse lives true to it’s name, for example … but it makes otherwise simple styling, complicated. Lets say I wanted a 4px 2 color border around a table ( most of my designs are more elaborate than this… but I want to keep this explanation simple) .
Intuitively , one would think give the table a 2px border with one color and style the sides of the TBODY, THEAD, and TFOOT and the TOP of the THEAD and the bottom of the TFOOT with 2px of the other color. You then see you only have the 2px border around the table the color of the TBODY element, and think… .ok… thats probably because the stacking order ( as seen in the link above)… so you would make the style of the table be 4px… and now what you see is a 4px border the color of the TABLE style.

With nested block elements you can nest styles…tables dont work that way ( I know) but I was looking as to understand the reason as to why they dont)…

11

@noonnope:
and how would you style an <input type=“checkbox”> USING ONLY CSS, and no other HTML tags?

12

@dresden_phoenix

See, this is where good knowledge comes in place. You probably are used to constructs such as this one:

<p><input type="checkbox" id="chk" name="chk" />Check me out!</p>

Wrong. Think harder. Do you really think you’d ever use input checkbox w/o at least one other html tag? Html tag that is a requirement for good code. That will make the whole construct clickable. :wink:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Check Box</title>

  <style type="text/css">

  </style>

</head><body>

    <form action="">
      <fieldset>
        <legend>Test for checkbox</legend>
        <p><input type="checkbox" id="chkbad" name="chkbad">Check me out! I'm bad!!!</p>
        <label for="chkgood"><input type="checkbox" id="chkgood" name="chkgood">Check me out! I'm the real deal!</label>
      </fieldset>
    </form>
    
</body></html>

Now, since the label is a requirement, since it responds to clicks, I’m sure you’ll see that styling it with images and hiding the input will achieve the “impossible” deed you’ve mentioned.

I’ll let you do the honours. If you can’t commit, or need a further development of the code above to prove my point, I’ll be happy to STYLE it for you. :slight_smile:

13

Yes it is a little confusing because you have to know where to look.

The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Tables are not like other elements because cells share borders and are driven by complicated border resolution algorithms to determine which borders are visible when overlaps occur so it’s not surprising that some things don’t work.

Cells and rows cannot be moved apart by margins but only by border spacing. Using margins would upset obviously upset the equalising nature of tables should one cell have more margin than another cell.

There are some things that just can’t be done with tables due to the way they have been set up and quite often you will find that you can’t get the border effect you want because of the border resolution rules.

I would have assumed that if i gave a TR an image background, and the TDs a different image background and gave the table border-collase:separate… that i would have been able to see the TR’s background image ( the same way as it would work with other nested elements)…

Well the spacing is outside the border and in css you can never place a background image outside its border so I would have said no you can’t do that anyway.

You could place the image on the table and then see it between the table rows. You can also place an image on the table row and as long as the td doesn’t have an image covering up it will work (IE does have some bugs though).

14

Noonnope… you a heva point. I was just being a purist… Which is the point of this post in fact, sometimes we need to hear … “nope, you cant style the INPUT directly, but Do you really think you’d ever use input checkbox w/o at least one other html tag?” Otherwise some of us, even if we use some semantically correct code will bang our head against the wall trying to style the INPUT so we can save the LABEL for something else… :slight_smile: ( but thanks for opening my eyes here)

I AM , however, still having problems getting the code you gave me to work. I am going to admit I am way off on this… but I am here to learn :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Check Box</title>

  <style type="text/css">
  label {background: url("http://anton.shevchuk.name/wp-content/uploads/2009/07/button-sprite-result.png") no-repeat -5px -12px;#000 ; display:block; height:55px;}
  label input {display:hidden;} //* doesnt hide  the imput.. how would you hide it??*/
  label[checked="checked" {background: url("http://anton.shevchuk.name/wp-content/uploads/2009/07/button-sprite-result.png") no-repeat -5px -79px;#000 ; display:block; height:55px;}/*this is proably wrong, ( i dont think labels can have the attribute of checked) but  what  I would need  now would be the label to change bg  when it holds an input with the attribute of "checked='checked'"*/

  </style>

</head><body>

    <form action="">
      <fieldset>
        <legend>Test for checkbox</legend>
        <p><input type="checkbox" id="chkbad" name="chkbad">Check me out! I'm bad!!!</p>
        <label for="chkgood"><input type="checkbox" id="chkgood" name="chkgood">Check me out! I'm the real deal!</label>
      </fieldset>
    </form>
    
</body></html>
15

PAul:

got it. What I meant about the spacing tho was that I thought it belonged to the TD element, thous the image of the TR element which is the parent of the TD… so one could logically assume that if you used border separate, you would be able to see the TR when the cells were spaced apart, rather than the cookie cutter effect which is what actually happens. Still… I think where I went wrong was by believing (hoping) that tables element would behave similar to other elements… which is not the case. For example I thought that border-spacing functioned liked giving the table cells a margin all around, and thus you could see the bg of their container THROUGH the “margin” or in this case spacing around the cell element.

It also helps to think of it as you said: “shared” borders… unlike other kinds of elements where “2 elements = 2 borders”

Yeah IE= wonky. but thats the one constant on this. I figured once I got the hang of the compliant UAs I could always rework for IE as needed. Pain tho it may be. Incidentally Safari Mac has the same repeating image bug… :confused:

16

Won’t work in iE8 and under but you could do this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Check Box</title>
<style type="text/css">
label {
    background:#000 url("http://anton.shevchuk.name/wp-content/uploads/2009/07/button-sprite-result.png") no-repeat -5px -12px;
    height:55px;
    float:left;
    margin-left:-25px;
    width:250px;
}
label, input {
    float:left;
}
input:checked + label {
    background-position:-5px -79px
}
label:hover {
    outline:1px dotted #ccc
}
label span {
    position:absolute;
    left:-999em
}
</style>
</head>
<body>
<form action="">
    <fieldset>
    <legend>Test for checkbox</legend>
    <div>
        <input type="checkbox" id="chkbad" name="chkbad">
        Check me out! I'm bad!!! </div>
    <div>
        <input name="chkgood" type="checkbox"  id="chkgood" >
        <label for="chkgood"><span>Check me out! I'm the real deal!</span></label>
    </div>
    </fieldset>
</form>
</body>
</html>

The label just slides on top of the input.

You’d need some js to toggle the input for IE and older browsers.

17

The biggest gain is not the custom styling, it’s the fact that by using <label> you achieve a clickble semantic accessible construct.

I’m happy to return the opening the eyes favour. :slight_smile: I was given the same gift on my turn, so it’s only fair.

18

Ah, its just a matter of semantics. I was right in saying that you cant style the INPUT type=checkbox itself ( Karpie brought it up… other wise I would have still wanted to keep experimenting with input[type=checkbox]{background:…}) My orginal question, I admit , wasn’t a practical but a theoretician one. At the same time Noonnope’s lesson will come really handy in PRACTICAL WAYS.

As long as am handing praise ( las of my good mood before I go and shovel myself out of 3ft of snow) :(… Thanks Paul I also gained a deeper PRACTICAL understanding of table styles.

thanks again to you both.