Page 1 of 1
Formatting HTML5 tables?
Posted: Mon Jul 30, 2012 12:38 am
by OldRod
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?
Re: Formatting HTML5 tables?
Posted: Mon Jul 30, 2012 5:41 am
by Winawer
Your code works for me. Maybe you have set a conflicting style somewhere?
Re: Formatting HTML5 tables?
Posted: Mon Jul 30, 2012 10:51 am
by OldRod
Hmmm... ok. My CSS file is getting pretty long and messy, I'll take another look
Re: Formatting HTML5 tables?
Posted: Mon Jul 30, 2012 1:00 pm
by OldRod
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?
Re: Formatting HTML5 tables?
Posted: Mon Jul 30, 2012 2:40 pm
by OldRod
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
Re: Formatting HTML5 tables?
Posted: Mon Jul 30, 2012 3:56 pm
by OldRod
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
