PDA

View Full Version : Beginner Question about CSS tables



jasonm
Jul 1st, 2009, 08:04 AM
Hello,

I know how css works and how to navigate around it and edit it, but I'm completely new to creating it.

Basically I'm looking to make a CSS table like the image I've attached in this post. I'm wanting the width to be 500px.

Could I get some help on how to get started?

I would greatly appreciate it!!

http://www.solarlocate.com/cssexample.jpg

effpeetee
Jul 1st, 2009, 11:43 AM
Not quite sure what you mean. But you can make three identical divs but with different names.
e.g.
#ent1{
}

#ent2{
}

#ent3{
}

Div can only be used once per page. Or you can use a class which can be used over and over.

.ent{
}
use as <div class="ent">

Plenty of help here. (http://www.exitfegs.co.uk/Sources.html)

Frank

SB65
Jul 1st, 2009, 11:44 AM
Hello jasonm

This looks to me like a good candidate for a definition list (http://www.maxdesign.com.au/presentation/definition/). You might try something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lists</title>
<style type="text/css" media="screen">
body{font-family:Arial;font-size:small;margin:0;padding:0}/* set defaults */
dl{margin:0;width:500px;display:block;border-bottom:1px dashed black;padding-bottom:10px}
dt{text-decoration:underline;font-size:medium;border-top:1px dashed black;margin:10px 0px;padding-top:10px}
/*adjust padding-top on dt and padding-bottom on dl to move dashed line up and down*/
dd{margin:0;padding:0;margin-top:3px}/* remove the default indent on dd, add margin-top to space it out a bit*/
</style>
</head>
<body>

<dl>
<dt>AAA Company</dt>
<dd>Austin, Texas</dd>
<dd>Description, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper libero varius tellus tristique quis luctus sem sagittis. Quisque turpis neque, vulputate eget vestibulum in, tristique non mauris. </dd>
<dt>AAA Company</dt>
<dd>Austin, Texas</dd>
<dd>Description, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper libero varius tellus tristique quis luctus sem sagittis. Quisque turpis neque, vulputate eget vestibulum in, tristique non mauris. </dd>
</dl>
</body>
</html>