Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Css For Table

This is a discussion on Css For Table, within the CSS section. This forum and the thread "Css For Table" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Css For Table
thewal
post May 21 2008, 08:39 AM
Post #1


Squeezing
***

Group: Members
Posts: 70
Joined: 14-February 08
From: Dublin, Ireland
Member No.: 107
Hi guys,

I want to do the following in a page and was wondering if you can point me in the right direction

"table" or CSS positioned text for below

Location Name of location
Property type Type of property
Price €100,000
Description Either a small or long description of the property

These are just 4 of 9 fields that I want to put in. I tried this using a table but the first field is going to a fixed width.

Any help on this would be great


--------------------
Finally squeeezin!!!!
Go to the top of the page
 
+Quote Post
karinne
post May 21 2008, 08:43 AM
Post #2


Co-Founder
*******

Group: Co-Founders
Posts: 2,794
Joined: 13-February 08
From: Squeezin'
Member No.: 2
Well ... did is data so a <table> should be used ... definitely.

Could you show us the code you have so far? Is this a 9 rows/2 columns table?


--------------------
The Squeeze Store is now OPEN! Come on in and grab something!

a web design portfolio | web non-sense - REDESIGNED!
I'm also on: del.icio.us | flickr | virb | facebook | twitter
The Web Squeeze is also on: virb | facebook | stumbleupon - JOIN IN!
Go to the top of the page
 
+Quote Post
MikeHopley
post May 21 2008, 09:19 AM
Post #3


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
Yes, a <table> is the right element for the job. It's easier and semantically correct. smile.gif

You can still control table formatting using CSS. So if you want the first row (consider <thead>) to be formatted specially, then just use CSS to apply that.
Go to the top of the page
 
+Quote Post
thewal
post May 21 2008, 09:26 AM
Post #4


Squeezing
***

Group: Members
Posts: 70
Joined: 14-February 08
From: Dublin, Ireland
Member No.: 107
Yes it is a 9 row 2 colum table

QUOTE (MikeHopley @ May 21 2008, 02:19 PM) *
You can still control table formatting using CSS. So if you want the first row (consider <thead>) to be formatted specially, then just use CSS to apply that.


Can you explain pls Mike.


--------------------
Finally squeeezin!!!!
Go to the top of the page
 
+Quote Post
MikeHopley
post May 21 2008, 09:47 AM
Post #5


Squeeze Machine
*****

Group: Mentor
Posts: 602
Joined: 15-February 08
From: UK
Member No.: 143
For example, you can apply CSS to the table like this:

CODE
table#propertyInfo {
width: 40em;
background: #ffd;
color: black;
padding: 0.3em;
}

td#location {
width: 20em;
}


You can set the widths and padding of tables, table rows, and table data cells. If you want to apply special styling rules to an individual part of the table (say, a <td>), then just give it an ID or CLASS and style it.

Note that the table display model has a few unique properties, so it doesn't work quite like a normal <div>. Read up on the table formatting model if you want all the gory details.

This post has been edited by MikeHopley: May 21 2008, 09:47 AM
Go to the top of the page
 
+Quote Post
thewal
post May 21 2008, 02:59 PM
Post #6


Squeezing
***

Group: Members
Posts: 70
Joined: 14-February 08
From: Dublin, Ireland
Member No.: 107
Ok have a look at the attached screen dump. As you can see the top is with the table. I think it looks better. I am still not sure how the first row looks, i.e. the left colum text lower than the right

Anyway here is code so far

CODE
CSS
#detail{
text-align: left;
font-weight: bolder;
color: #5a6ae5;
width: 500px;
padding: 0.3em;
}
Html
</div>
<table id="detail">
<tr>
<td>Details:</td>
<td>Two Bedroom furnished apartment in the town centre. large garden, air conditioning, car parking.</td>
</tr>
<tr>
<td>Location:</td>
<td>Bodrum</td>
</tr>
<tr>
<td>Bedrooms:</td>
<td>Two</td>
</tr>
<tr>
<td>Bathrooms:</td>
<td>One</td>
</tr>
<tr>
<td>Kitchen:</td>
<td>Open</td>
</tr>
<tr>
<td>Terrace:</td>
<td>None</td>
</tr>
<tr>
<td>Price:</td>
<td>€150,000</td>
</tr>
</table>
}


What do you all think?? Any ideas for improvement?
Attached File(s)
Attached File  Brentbodrum.com_Bodrum_re_sale_property_1211399487421.png ( 268.52K ) Number of downloads: 13
 


--------------------
Finally squeeezin!!!!
Go to the top of the page
 
+Quote Post
James
post May 21 2008, 04:57 PM
Post #7


Fresh Squeezed
**

Group: Members
Posts: 35
Joined: 17-May 08
From: Dallas, Texas
Member No.: 226
If it were me I would probably make that left column a darker shade of the purple-ish color. You know, spice it up a little.

This post has been edited by James: May 21 2008, 04:57 PM


--------------------
Atomic Design & Consulting
Web / eMarketing / SEO

Denali Design
Portfolio Site
Go to the top of the page
 
+Quote Post
ejg
post May 21 2008, 06:40 PM
Post #8


Squeezing
***

Group: Members
Posts: 75
Joined: 14-February 08
Member No.: 86
Now that I see what you are doing, I would use a definition list.

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>dl</title>

<style>
dl.details {
    margin: 0;
    padding-top: 10px;
    }
dl.details dt {
    font-weight: bold;
    float: left;
    clear: left;
    width: 6em;
    }
dl.details dd {
    margin: 0 0 0 6em;
    padding: 0 0 0.5em 0;
    height: 1em;
    }
</style>

</head>

<body>
<dl class="details">
    <dt>Details:</dt>
    <dd>Two Bedroom furnished apartment in the town centre. large garden, air conditioning, car parking.</dd>
    <dt>Location:</dt>
    <dd>Bodrum</dd>
    <dt>Bedrooms:</dt>
    <dd>Two</dd>
    <dt>Bathrooms:</dt>
    <dd>One</dd>
    <dt>Kitchen:</dt>
    <dd>Open</dd>
    <dt>Terrace:</dt>
    <dd>None</d>
    <dt>Price:</dt
    <dd>€150,000</dd>
</dl>
</body>
</html>
Go to the top of the page
 
+Quote Post
thewal
post May 22 2008, 02:45 PM
Post #9


Squeezing
***

Group: Members
Posts: 70
Joined: 14-February 08
From: Dublin, Ireland
Member No.: 107
Hi guys,

Thanks very much ejg, I took your advice. The code is a little bit different. Attached the result

CODE
CSS
dl {
padding: 0.5em;
}

dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
color: #5a6ae5;
}
  
dd {
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
}


See what you think

Thanks again
Attached File(s)
Attached File  Brentbodrum.com_Bodrum_re_sale_property_1211485242578.png ( 268.37K ) Number of downloads: 6
 


--------------------
Finally squeeezin!!!!
Go to the top of the page
 
+Quote Post
Linda
post May 22 2008, 07:36 PM
Post #10


Co-Founder
*******

Group: Co-Founders
Posts: 2,771
Joined: 13-February 08
From: Pink House in USA
Member No.: 3
Getting better everyday!!


--------------------
Maine-ly Web Design | My Photography | Twitter ME
Check out Stumbleupon
Go to the top of the page
 
+Quote Post
« Next Oldest · CSS · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   10 jackfranklin 308 17th February 2008 - 01:44 PM
Last post by: Rakuli
No New Posts   7 Jason 287 19th February 2008 - 03:02 PM
Last post by: JasonStanley
No new   14 Inkers 290 20th March 2008 - 12:44 PM
Last post by: Linda
No New Posts   11 MikeHopley 284 4th April 2008 - 06:37 AM
Last post by: MikeHopley
No New Posts   4 djeyewater 209 15th May 2008 - 02:08 PM
Last post by: djeyewater