Or CSS tables or how to display your data in an organized manner.
To get this result, you have to use tables because if you’re obsessed with floating divs and paragraphs they won’t help you much right now.
To get started I’ll show you the result first:
Now that we know how the result should look like let’s start doing it.
First thing first: the HTML markup:
<table id=”GridTable_1″ class=”x-GridTable” cellpadding=”0″ cellspacing=”0″>
<thead>
<tr>
<th class=”x-caption”>Column #1</th>
<th class=”x-caption”>Column #2</th>
<th class=”x-caption”>Column #3</th>
</tr>
</thead>
<tbody>
<tr>
<td class=”x-title”>
<a class=”x-link” href=”#”>Row title</a>
</td>
<td class=”x-description”>
<span class=”x-description”>Row description</span>
</td>
<td class=”x-content”>
<span class=”x-content”>Row content</span>
</td>
</tr>
<tr>
<td class=”x-title”>
<a class=”x-link” href=”#”>Row title</a>
</td>
<td class=”x-description”>
<span class=”x-description”>Row description</span>
</td>
<td class=”x-content”>
<span class=”x-content”>Row content</span>
</td>
</tr>
</tbody>
</table>
Now that we have the markup let’s start doing some styling:
<head>
<title>A Grid-like Table</title>
<style type=”text/css” media=”screen”>
BODY H1 {
width: 75%;
font-family: Georgia, Serif;
font-size: 16pt;
color: #8b0000;
margin: 25px 0 25px 25px;
border-bottom: solid 1px #8b0000;
}
TABLE.x-GridTable {
width: auto;
height: auto;
border-collapse: separate;
border-spacing: 0 0;
border: solid 1px #8B0000;
margin: 0 0 0 25px;
}
TABLE.x-GridTable TH.x-caption {
background-color: #EDEDED;
text-align: left;
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #8b0000;
border-bottom: solid 1px #8b0000;
padding: 4px 0 4px 5px;
}
TABLE.x-GridTable TD {
width: 200px;
height: auto;
text-align: left;
vertical-align: top;
font-family: Verdana, Sans-Serif;
font-size: 8pt;
color: #000000;
padding: 4px 0 4px 0;
border: none 0;
}
TABLE.x-GridTable TR:hover TD {
background-color: #EDEDED;
color: #8b0000;
}
A.x-link, SPAN.x-description, SPAN.x-content {
width: auto; margin: 0 5px 5px 5px;
}
A.x-link {
color: #000000; text-decoration: none;
}
A.x-link:hover {
color: #FF0000; text-decoration: underline;
}
SPAN.x-description {
font-style: italic;
}
SPAN.x-content { /* Styling the row content here… */ }
</style>
</head>
What? You expected more coding? Well, sorry for disappointing you.. 
It is really that easy!
Now imagine doing this using floating divs or paragraphs or whatever you probably might think that will help you…
All you have to do is to add the :hover pseudo-class to the Table Row to specify how the cells inside that row should look like when hovered:
TABLE.x-GridTable TR:hover TD {
background-color: #EDEDED;
color: #8b0000;
}
If you’d like to see it in action, here is the link: A Grid-like table
Note:
This example was especially made for those lovers of divs and floating elements. You think tables are evil? Well, think again!
Popularity: 7% [?]
SEO MegaCorp news blog is dedicated to provide tips, tricks and latest news around the industry that one might miss. We're a SEO company which is based in India, which is dedicated only to serve the clients with thier full satisfaction...
No User Responded in " Create a Grid-like table "
Leave A Reply Here