Formatting HTML5 tables?

OldRod · Post by **OldRod** » Mon Jul 30, 2012 12:38 am

I am trying to display some data in a table in HTML5 and my formatting isn't working.

HTML5 took away a lot of the TD/TR properties like align, width, etc. and recommends you use CSS to style tables now, so that's what I'm trying to do.

I have the following in my CSS file:

Code: Select all

td.test {
	text-align: right;
	width: 200px;
	border: 1px solid #336699;
}

In my HTML I have:

Code: Select all

<td class="test"><?php echo $row->racename; ?></td>

When I run the page, the border is there and the text is aligned, but the width doesn't set.

How do you set table cell widths in HTML5?

Winawer · Post by **Winawer** » Mon Jul 30, 2012 5:41 am

Your code works for me. Maybe you have set a conflicting style somewhere?

OldRod · Post by **OldRod** » Mon Jul 30, 2012 10:51 am

Hmmm... ok. My CSS file is getting pretty long and messy, I'll take another look

OldRod · Post by **OldRod** » Mon Jul 30, 2012 1:00 pm

It's not a conflicting style. Decided to make a barebones page to test it out.

Code: Select all

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>td {width:500; border: 1px solid #999999; text-align: right;}</style>
  </head>
<body>

	<table>
			<thead>
				<th>Test 1</th>
				<th>Test 2</th>
			</thead>

			<tbody>
				<tr>
					<td>Stuff</td>
					<td>More Stuff</td>
				</tr>
			</tbody>
		</table>
</body>
</html>

Changing text-align and border works fine. Changing width does not work.

Tested it in both Chrome and Firefox - width style does not change the td width. So, back to my original question... is there a different way to do this in HTML5?

OldRod · Post by **OldRod** » Mon Jul 30, 2012 2:40 pm

OK, just shoot me... the example in the last post is wrong (I forgot 'px' in my width style)

That simple example now works. Just gotta figure out why my page I'm developing doesn't

OldRod · Post by **OldRod** » Mon Jul 30, 2012 3:56 pm

The moral of the story is... never code when you are tired and dehydrated from mowing your yard in 100+ degree heat

Found the problem. My containing div was too small, so no matter what width I made the columns, the browser was shrinking them to fit the entire table in the div width

Formatting HTML5 tables?

Formatting HTML5 tables?

Re: Formatting HTML5 tables?

Re: Formatting HTML5 tables?

Re: Formatting HTML5 tables?

Re: Formatting HTML5 tables?

Re: Formatting HTML5 tables?