Thankfully the W3C seem to be sticking with tables in HTML5 despite all the criticisms. Most, if not all of the old attributes have gone, leaving us with simple tags and the introduction of the summary attribute to the table tag. Presumably this is to overcome the complaints about accessibility. It looks like a good strategy to me. Tables for data are good. Tables for layout, not so good.
See demo.
Below is an example of a HTML5 table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables in HTML5</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
table
{
margin:4em;
border:#CCCCCC solid 0.1em;
}
th, td
{
border-bottom:#CCCCCC solid 0.1em;
border-left:#CCCCCC solid 0.1em;
padding:1em;
}
th
{
background:#A7FFFF;
}
</style>
</head>
<body>
<table summary="Everything has a consequence.">
<tr>
<th>Action</th>
<th>Result</th>
</tr>
<tr>
<td>Work</td>
<td>Pay</td>
</tr>
<tr>
<td>Play</td>
<td>Happiness</td>
</tr>
<tr>
<td>Love</td>
<td>Love</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment