Styling an HTML Table

DoubleDee · May 19, 2012, 5:32am

What is the proper way to style an HTML Table?

HTML has attributes for most things you would need to format a Table, but I’m a little confused how you handle the formatting with CSS and leave the semantics stuff to HTML.

Attached is a very basic “Inbox” that I’m working on…

I know know - or at least I used to know - how to do this following with straight HTML, but I’m unsure of how to do it using CSS…

1.) Space between Text and the Cell Border?

2.) Borders around Cells?

3.) Text Alignment

4.) Background Color on Cells?

What the “hooks” are supposed to be…

And do you style a Table using a combination of HTML Formatting and CSS Formatting? :-/

Thanks,

Debbie

Sega · May 19, 2012, 5:37am

Personally I use CSS.

This is the table structure:


<table>
<thead>
   <tr><td>Data 1</td><td>Data 2</td></td>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></td>
<tr><td>Data 1</td><td>Data 2</td></td>
<tr><td>Data 1</td><td>Data 2</td></td>
</tbody>
</table>

From here I use CSS. I always collapse my borders and have a 1px on the outer border, because this is how I like it. Occasionally I place a background image on the top thead cells. I also like to centre the heading cells. Apart from that I guess it all depends on the design.

DoubleDee · May 19, 2012, 5:39am

Sega:

Personally I use CSS.

This is the table structure:
<table>
<thead>
   <tr><td>Data 1</td><td>Data 2</td></td>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td></td>
<tr><td>Data 1</td><td>Data 2</td></td>
<tr><td>Data 1</td><td>Data 2</td></td>
</tbody>
</table>
From here I use CSS. I always collapse my borders and have a 1px on the outer border, because this is how I like it. Occasionally I place a background image on the top thead cells. I also like to centre the heading cells. Apart from that I guess it all depends on the design.

Okay, but that doesn’t answer my questions.

I’m not sure how to do it in CSS…

Thanks,

Debbie

Sega · May 19, 2012, 5:53am

It’s quite easy, what do you know about CSS? You need to know about classes, ID’s, CSS properties and you’re set to go. CSS isn’t particularly hard, but I guess I would be saying that

Take a look at this - http://reference.sitepoint.com/css/table-layout

The main differences between the tables are those table properties shown above.

dresden_phoenix · May 19, 2012, 6:08am

Styling tables with CSS is the same as any other element… then again… there are certain differences to consider.

ROWS/ THEAD/TFOOT/TBODY/TRs dont actually style per-se. But they do bequeath style to children. For example. you cant actually usea TR as an image hook ( sucks, I know).
TDs don’t have margin, individually . However you can give the table cell-spacing… this will space ALL the TDs accordingly.
You cant use relative or absolute positioning on table elements. While it sound inconvenient enough , you have to understand it gets even more tricky. you cant have RP on a TD. Not only does that mean you cannot alter where the TD is displayed. but that you cant use it as a point of reference to AP other elements
You CAN give cells fixed dimensions. Do understand that , depending on the table rendering , content will stretch the table element when it has on other option.

Keeping these limitations in mind you can more successfully strategize your table styling CSS

1.) Space between Text and the Cell Border?

padding. The box model works backward here, btw. ( or put margin on your text element)

2.) Borders around Cells?

same as a block element, but interaction of overlapping borders is controlled by border-collapse:; and border-spacing;

3.) Text Alignment

same as a block element + you can use vertical-align!

4.) Background Color on Cells?

Same as a block element, or you can let it cascade from the TR to the TDs

system · May 19, 2012, 6:12pm

Where are your TH? The entire THEAD should usually be TH with scope=“col”

First order of business is getting the right markup in there. Because the top select grabs all of them, I’d give it TH and scope=“row” like it’s kin. In TBODY I’d also make them TH with scope=“row” so you know that they effect the entire row.


<table>
	<thead>
		<tr>
			<th scope="col">
				<input type="checkbox" name="selectAll" id="selectAll" />
			</th>
			<th scope="col">Flag</th>
			<th scope="col">From</th>
			<th scope="col">Subject</th>
			<th scope="col">Date</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">
				<input type="checkbox" name="selectRecord1" id="selectRecord1" />
			</th>
			<td>Nancy Lee</td>
			<td>Re:Surprise Party this Saturday</td>
			<td>2012-05-17 21:08:11</td>
		</tr><tr>
			<th scope="row">
				<input type="checkbox" name="selectRecord2" id="selectRecord2" />
			</th>
			<td>Betty Boop</td>
			<td>Re:Surprise Party this Saturday</td>
			<td>2012-05-17 21:09:00</td>
		</tr><tr>
			<th scope="row">
				<input type="checkbox" name="selectRecord3" id="selectRecord3" />
			</th>
			<td>Bimbo</td>
			<td>Will there be cake</td>
			<td>2012-05-17 21:09:51</td>
		</tr><tr>
			<th scope="row">
				<input type="checkbox" name="selectRecord4" id="selectRecord4" />
			</th>
			<td>GlaDOS</td>
			<td>Anyway this cake is great! It's so delicious and moist!</td>
			<td>2012-05-17 21:11:33</td>
		</tr>
	</tbody>
</table>

That way you can make all TH text-align:center; and all TD text-align:left; – and all TH bold.

I MIGHT consider classes on the THEAD’s TH just to set widths that will be obeyed everywhere, and maybe classes on some elements to set things like white-space:nowrap on the DATE. If you don’t care about IE8/earlier you could use nth-child instead of classes, if you don’t care about IE6/earlier you could use sibling selectors instead as well.

I’d also perhaps consider moving the message title BEFORE the poster, and making that a TH, since it’s kind of what the rest of the data is about… I might even consider… yeah, this would be better.


<table id="messages"  cellspacing="1">
	<thead>
		<tr>
			<th scope="col" class="message">
				<input type="checkbox" name="selectAll" id="selectAll" />
				<label for="selectAll">Select All</label> - Message:
			</th>
			<th scope="col">From</th>
			<th scope="col">Date</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row" class="message">
				<input type="checkbox" name="selectRecord1" id="selectRecord1" />
				<label for="selectRecord1">
					Re:Surprise Party this Saturday
				</label>
			</th>
			<td>Nancy Lee</td>
			<td>2012-05-17 21:08:11</td>
		</tr><tr>
			<th scope="row" class="message">
				<input type="checkbox" name="selectRecord2" id="selectRecord2" />
				<label for="selectRecord2">
					Re:Surprise Party this Saturday
				</label>
			</th>
			<td>Betty Boop</td>
			<td>2012-05-17 21:09:00</td>
		</tr><tr>
			<th scope="row" class="message">
				<input type="checkbox" name="selectRecord3" id="selectRecord3" />
				<label for="selectRecord3">
					Will there be cake
				</label>
			</th>
			<td>Bimbo</td>
			<td>2012-05-17 21:09:51</td>
		</tr><tr>
			<th scope="row" class="message">
				<input type="checkbox" name="selectRecord2" id="selectRecord2" />
				<label for="selecctRecord4">
					Anyway this cake is great! It's so delicious and moist!
				</label>
			</th>
			<td>GlaDOS</td>
			<td>2012-05-17 21:11:33</td>
		</tr>
	</tbody>
</table>

until you have semantic markup and logical structure, it’s hard to say how to style it – once you have them, you should have all the CSS hooks you need, it should come naturally, and it should even look decent CSS off.

Note I’d keep the cellspacing since FF is still a re-re about the border-spacing property for tables.

The CSS is then a simple:


#messages {
	width:100%;
}

#messages,
#messages td,
#messages th {
	border:1px solid #000;
}

#messages td,
#messages th {
	padding:0.2em 0.4em; /* always looks better with a bit more padding */
}

#messages td {
	width:1%;
	white-space:nowrap;
	text-align:center;
}

#messages tbody th {
	font-weight:normal;
}

#messages .message {
	text-align:left;
}

Though I have no idea what that input above the table is – might be you want to drop the border on the table, put a div or fieldset around all of it, and put the outer border on that – since that element looks like it has NOTHING to do with the table.

Have a look at this old, old OLD example of mine showing how to style a table with no classes needed
http://battletech.hopto.org/html_tutorials/tableExample.html
(admittedly, it needs SCOPE)

Sega · May 20, 2012, 4:18pm

@deathshadow60;

Thanks for correcting me

DoubleDee · May 20, 2012, 6:58pm

DeathShadow,

Thanks for the detailed reply.

First off, I figured that I can apply styles to a Table pretty much like any other HTML element so that isn’t so bad.

As far as your suggestions, honestly my Inbox is a moving target right now, so I’m gonna table things - no pun intended!!! - for now…

Once I have things looking like I want, I’ll come back and see what I can do to improve things semantically.

(Normally I’m all for planning first, but this is a time where it is better to build a “down and dirty” mock-up, kick it around, and then come back and clean things up after I know what I really want/need…)

Thanks,

Debbie

felgall · May 20, 2012, 9:44pm

If you want to apply styles to the columns in the table you can add <colgroup> and <col> tags between the <table> and <thead> tags to give you tags to attach the column styles to.

system · May 20, 2012, 9:47pm

Just beware of it NOT working for many properties – like alignment – in FF.

Gotta love decade or more old gaps in implementations of finalized specifications, while they’re wasting time on new ones that aren’t even useful… but again, with open source if it’s not flashy, trendy, or worth setting a bounty for, don’t plan on ever seeing it fixed.

Though to be fair, how many browsers actually support CHAR or CHAROFF… Oh wait, that’s right – NONE OF THEM.

But sure, let’s waste time adding pointless crap like NAV, SECTION and ASIDE.

Topic		Replies	Views
Can I put COLSPAN definitions in my CSS? HTML & CSS	83	4952	March 26, 2017
Styling TABLE sub-elements? HTML & CSS	17	2481	February 2, 2011
Need some help to get these Tables Right (PLS) HTML & CSS	15	1067	March 1, 2010
Nesting a css table inside a fairly wonky html table HTML & CSS	11	1047	October 8, 2014
Putting table markup into css rather than html HTML & CSS	5	680	October 8, 2014

Styling an HTML Table

Related topics