This week's CSS/HTML question

KrunkMcGrunk

I'm back!

Anyhow, I'm trying to figure out how to apply the border property to a class that is used in a column. Here's the table:

<table>
	<colgroup>
		<col />
		<col class="alternate" />
		<col />
	</colgroup>
	<tr>
		<td>This</td>
		<td>That</td>
		<td>The other</td>
	</tr>
	<tr>
		<td>Ladybird</td>
		<td>Locust</td>
		<td>Lunch</td>
	</tr>
	<tr>
		<td>Thing 1</td>
		<td>Thing 2</td>
		<td>Thing 3</td>
	</tr>
</table>

And here's the CSS class:

.alternate {
	background: #C8FFFF;
	border: 1px solid black;
}

I'm getting the background color from .alternate to show up in the middle column, but I'm not getting a border. Is border a valid property for column? What am I doing wrong?

SeñorAmor

Add

style="border-collapse: collapse"

to your table and it should work.

KrunkMcGrunk

Where do I put that? In the table tag, or in the CSS stylesheet?

SeñorAmor

KrunkMcGrunk wrote: »

Where do I put that? In the table tag, or in the CSS stylesheet?

Either in the table tag:

<table style="border-collapse: collapse;">

or in your css:

table { border-collapse: collapse; }

However that will apply to all tables.

KrunkMcGrunk

Why didn't

border: 1px solid black;

work?

SeñorAmor

Short answer: because tables suck and you should really be using <div>s

Longer, less-biased answer: As I understand it (and please, someone correct me if I'm wrong), tables (and cells) have their own "border" that overrides user-defined borders and must therefore be "removed" and have new border definitions applied.

KrunkMcGrunk

Yeah, I don't really plan on using tables very often. But, for the sake of completeness, I'm learning tables anyhow by way of HTMLdog - which is a great site, but doesn't go very in-depth from what I can tell.

Seguer

SeñorAmor wrote: »

Short answer: because tables suck and you should really be using <div>s

Longer, less-biased answer: As I understand it (and please, someone correct me if I'm wrong), tables (and cells) have their own "border" that overrides user-defined borders and must therefore be "removed" and have new border definitions applied.

Tables are fine (and better!) for tabular data.

Your original border declaration should have given you a border, but border-collapse will make it look nicer (generally).

Quick Google results which should be able to give you some more info:

http://www.search-this.com/2007/04/11/styling-table-columns-with-css/
http://www.w3schools.com/tags/tag_colgroup.asp

KrunkMcGrunk

I'm reading over that first link you posted (http://www.search-this.com/2007/04/11/styling-table-columns-with-css/)

And in this example:

#
<style type="text/css">
table{border-collapse:collapse}
.col1,.col5,.col9{background:red}
.col2,.col6,.col10{background:blue}
.col3,.col7{background:green}
.col4,.col8{background:orange}
td,th{border:1px solid #000;padding:5px}
 
</style>

Couldn't that be greatly simplified by applying a CSS as such:

<style type="text/css">
table{border-collapse:collapse}
.colstyle1{background:red}
.colstyle2{background:blue}
.colstyle3{background:green}
.colstyle4{background:orange}
td,th{border:1px solid #000;padding:5px}

</style>

Then, have your HTML look like

      <col class="colstyle1" />
      <col class="colstyle1" />
      <col class="colstyle1" />
      <col class="colstyle2" />
      <col class="colstyle2" />
      <col class="colstyle2" />
      <col class="colstyle3" />
      <col class="colstyle3" />
      <col class="colstyle4" />
      <col class="colstyle4" />

In place of applying a separate class for every column in the table?

That's valid HTML, right? And a lot easier to code, as well as being lighter? Or am I way off?

Sharp101

Either way looks valid.

The first way does have 'more' CSS, but isn't abnormal. As far as CSS goes, it's still simple. It also has the benefit of allowing you to easily switch styles of each column as needed.

Your second way looks cleaner, but down the line if you want to change the 3rd column to purple, you would have to go in and change your HTML.


Basically both ways are valid, but the first way is more flexible. Saving a few characters in your CSS file isn't worth the loss of flexibility IMO.

KrunkMcGrunk

One more question. I read this on HTML Dog:

You can make the tbody element scroll in Mozilla, by applying the style overflow: auto; max-height: [whatever] to it. You will then see the header and footer kept in place and a vertical scroll bar to the right of the body. You should use the max-height property because IE doesn't recognise it and so it is safer than using the height property, which IE would apply to every row.

I just can't figure out where exactly I'm supposed to apply the style. Like, is it supposed to go in my CSS as:

tbody {
	overflow: auto; max-height: 5px;
}

Or does it go somewhere else? I know I have it wrong right now, as it does nothing.

Dranyth

Yeah, that'll work, but you have to use the full table markup for it to do anything. Thus you'll need something like:

<table>
 <thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
 </thead>
 <tfoot>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 </tbody>
</table>

That way, when the table rows in <tbody> go beyond the height set in the CSS, it'll gain scrollbars, but only on that part. Anything in the thead and/or tfoot will remain in place.

Edit: Slight correction, didn't realize tfoot has to go before tbody, never had to use it before.

Dranyth

Argh, double post.

KrunkMcGrunk

That's what I thought, but it doesn't seem to work for me

Here's my HTML

<table>
	<caption>How 'bout some scrolls, dawg?</caption>
	<colgroup>
	<col class="alternate" />
	<col />
	<col class="alternate" />
	</colgroup>
<thead>
<tr>
	<td>Header 1</td>
	<td>Header 2</td>
	<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
	<td>Footer 1</td>
	<td>Footer 2</td>
	<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
	<td>Cell 1</td>
	<td>Cell 2</td>
	<td>Cell 3</td>
</tr>
<tr>
	<td>Cell 21</td>
	<td>Cell 22</td>
	<td>Cell 23</td>
</tr>
<tr>
	<td>Cell 31</td>
	<td>Cell 32</td>
	<td>Cell 33</td>
</tr>
<tr>
	<td>Cell 41</td>
	<td>Cell 42</td>
	<td>Cell 43</td>
</tr>
<tr>
	<td>Cell 51</td>
	<td>Cell 52</td>
	<td>Cell 53</td>
</tr>
</tbody>
</table>

Here's my CSS re: tables

.alternate {
	background: #C8FFFF;
	border: 1px solid black;
}

table {
	border-collapse: collapse;
}

caption {
	border: 3px double #000;
	padding: 2px;
}

tbody {
        overflow: auto; max-height: 5px;
}

td {
	border: 1px solid #000;
	padding: 5px;
}

Dranyth

Hmm... in theory that should work I'm pretty sure. Unless the max-height is just way too small, not even enough for one row to appear? That's the only thing that slightly stands out to me.

What browser(s) are you viewing the tests in anyway? The only one that you have to do extra tricks in for the scrolling table body to work is IE7 and below I *think*.

KrunkMcGrunk

I'm using it in Firefox.

I just tried out this:

tbody {
      height: 100px; 
      width: 100px;
      overflow: auto;
}

And it worked. Maybe I because I had overflow before I defined the table size? Or maybe max-height isn't a valid attribute?

Dranyth

max-height is valid and supported in all major browsers though. Very weird, not sure why it wouldn't work like that.

Seguer

max-height: 5px might not have been giving it enough "room" to introduce the scrollbar?

Krunk, might be an idea if you can find somewhere to upload these files when you're working on them, cos then we can take a look without having to replicate it ourselves.

Oh - you've got Firebug and Web Developer toolbar, right? They're addons for Firefox and help lots.

KrunkMcGrunk

Seguer wrote: »

max-height: 5px might not have been giving it enough "room" to introduce the scrollbar?

Krunk, might be an idea if you can find somewhere to upload these files when you're working on them, cos then we can take a look without having to replicate it ourselves.

Oh - you've got Firebug and Web Developer toolbar, right? They're addons for Firefox and help lots.

I don't have those addons, but I will get them! I've heard them highly recommended.

And, I think you might be right about 5px not being enough room to introduce the scrollbar. That's about the only thing I can think of.