...

View Full Version : How to format this table in CSS?



frozenade
03-10-2009, 04:54 AM
Hi..

I created this format with ordinary table, it's pretty simple, but I have no clue how to doing this in CSS.

http://img18.imageshack.us/img18/9443/joea.jpg

May somebody help me please..

Thank you very much.

roeyfreak10
03-10-2009, 04:59 AM
here is a link i found helpful in the past http://snook.ca/archives/html_and_css/getting_your_di/

frozenade
03-10-2009, 06:07 AM
Thank you. It's a bit different than I looking for, but with a little bit modification then I get it. Thank you for help me out.. :)

abduraooft
03-10-2009, 09:08 AM
The following simple markup would do it in cross browsers friendly manner
ul.mylist,ul.mylist li{
list-style:none;
}
ul.mylist span{
float:left;
width:150px;
text-align:right;
}

<ul class="mylist">
<li><span>Name</span> Joe</li>
<li><span>Job</span> Engineer</li>
</ul>

Apostropartheid
03-10-2009, 06:50 PM
The table is more appropriate in my opinion, though.


<!doctype html>
<html lang="en">
<head>
<title>Table</title>
<style type="text/css">
html {
font: 16px/1.5 verdana, sans-serif;
}
th {
font-weight: normal;
text-align: right;
}
th,
td {
padding: 0 5px;
vertical-align: bottom;
}
address {
font-style: normal;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<td>Joe</td>
</tr>
<tr>
<th>Address</th>
<td>
<address>13<sup>th</sup> Street</address>
</td>
</tr>
<tr>
<th>Job</th>
<td>Engineer</td>
</tr>
<tr>
<th>Status</th>
<td>Single</td>
</tr>
<tr>
<th>Salary</th>
<td>$570</td>
</tr>
</table>
</body>
</html>
This should do the job you want. Note the use of the th and address elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum