PDA

View Full Version : CSS-styled tables


mek113
03-18-2008, 09:52 PM
I'm trying to style a table using CSS with the style editing feature in Dreamweaver but I'm not seeing the options I need. In looking at CSS references I can figure out how to hand-code it but I'd like to have Dreamweaver walk me through it.

I've tried setting the table up on my page in hopes that I could create a style from the existing table but it doesn't look like Dreamweaver works backwards like that.

And yes, this is tabular data that I'm putting in the table.

Any suggestions to make this easier?

mek113

edbr
03-19-2008, 01:28 AM
you can edit a tag in css styles ie td tr. add css style the select tag and off you go.

Rob_Che
03-19-2008, 01:10 PM
I have one saved here http://photostore-uk.com/sales.htm/css/table.css that you could use as a template.

I didn't write it - it was a free tutorial one but should work as a template...

Rob

mek113
03-19-2008, 02:29 PM
Rob Che,
I got a 404 page not found message from your link.

mek113

mek113
03-19-2008, 02:32 PM
edbr,
You make it sound so simple. My confusion comes in when I want the text in one column to be left aligned, another column to be right aligned, no interior borders, but outside borders. I'm assuming I'll have to create a style for each column and row, which gets pretty tedious.

mek113

domedia
03-19-2008, 02:39 PM
How is it pretty tedious? This is not very hard. Do you have a mockup of what you're trying to achieve?

mek113
03-19-2008, 04:54 PM
Here is the code for the standard HTML table.

<table width="350" style="margin:auto">
<tr>
<td width="56%">&nbsp;</td>
<td width="20%"><center>
ADULTS
</center></td>
<td width="24%"><center>
CHILDREN<br>
(Ages 4-12)
</center></td>
</tr>
<tr>
<td><div align="left">Tuesday, July 22</div></td>
<td><div align="right">$8.00</div></td>
<td><div align="right">$7.00</div></td>
</tr>
<tr>
<td><div align="left">Wednesday, July 23</div></td>
<td><div align="right">$8.00</div></td>
<td><div align="right">$7.00</div></td>
</tr>
<tr>
<td><div align="left">Thursday, July 24</div></td>
<td><div align="right">$8.00</div></td>
<td><div align="right">$7.00</div></td>
</tr>
<tr>
<td><div align="left">Friday, July 25</div></td>
<td><div align="right">$15.00</div></td>
<td><div align="right">$12.00</div></td>
</tr>
<tr>
<td><div align="left">Saturday, July 26</div></td>
<td><div align="right">$15.00</div></td>
<td><div align="right">$12.00</div></td>
</tr>
<tr>
<td colspan="3"><center>
Children Age 3 and Under Admitted FREE
</center>
<div align="right"></div></td>
</tr>
</table>

Cary
03-20-2008, 03:19 AM
I'm not really sure how you want the borders, but this might be close to what you have in mind. Also check out A CSS styled table (http://veerle.duoh.com/blog/comments/a_css_styled_table/) and A CSS styled table version 2 (http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/) which also show the use of the scope attribute.

<table width="350" cellspacing="0">
<tr>
<th width="56%">&nbsp;</th>
<th width="20%">ADULTS</th>
<th width="24%">CHILDREN<br>(Ages 4-12)</th>
</tr>
<tr>
<td class="first">Tuesday, July 22</td>
<td>$8.00</td>
<td>$7.00</td>
</tr>
<tr>
<td class="first">Wednesday, July 23</td>
<td>$8.00</td>
<td>$7.00</td>
</tr>
<tr>
<td class="first">Thursday, July 24</td>
<td>$8.00</td>
<td>$7.00</td>
</tr>
<tr>
<td class="first">Friday, July 25</td>
<td>$15.00</td>
<td>$12.00</td>
</tr>
<tr>
<td class="first">Saturday, July 26</td>
<td>$15.00</td>
<td>$12.00</td>
</tr>
<tr>
<td colspan="3">
<center>Children Age 3 and Under Admitted FREE</center>
<div></div>
</td>
</tr>
</table>

table {
border-top:1px solid #000;
border-bottom:1px solid #000;
margin:auto;
border-collapse:collapse;
}
th, td {
border-left:1px solid #000;
border-right:1px solid #000;
}
th {
text-align:center;
vertical-align:top;
}
td {
text-align:right;
}
td.first {
text-align:left;
}

Rob_Che
03-20-2008, 08:58 AM
Nice post Cary.

Sorry - it was a css file I was linking to not a page.
Wasn'y sure if you'd be able to view the code in notepad.
No worries - Cary has done you proud there.

Rob