Google Sign in options
Remember me
This is not recommended for shared computers

Privacy Policy
Sign In
Create Account

Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Subscribe to HRA Now!

Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE!

www.CustomReportSharing.com

From the folks who brought you High Rankings!

Css With Tables

Started by Skyline Jill , Nov 14 2003 08:54 PM

Please log in to reply

9 replies to this topic

#1 Skyline Jill

HR 2

Active Members
31 posts

Posted 14 November 2003 - 08:54 PM

This is my first week with CSS. I am a beginner definately. I understand how to manipulate the header tags, bold, body text etc. Pretty basic.

Problem: I have three different tables that have different parameters.

Table one was easy! it was 240 wide with 1 cell so my code was like this:

table {cellSpacing:0; cellPadding:0; width:240; bgColor:#666699 border:0; style border: 1 solid #000000 }

How do I handle table 2 and table 3? I learn best by examples. So if the code was actually written out like above, I could disect it and learn.

What would the code look like for a table that is 400 X 300 with 5 columns and 2 rows?

Also, how would I call up this table in my code so it pulled from the CSS?

Boy, do I feel like I am cheating on a test...thanks in advance to all those CSS experts! :naughty:

Back to top

#2 DianeV

HR 4

Active Members
166 posts

Location:Los Angeles

Posted 15 November 2003 - 02:27 AM

If I understand what you're doing, the above code is in the <head> area of your page, or in an external CSS file?

If so, by specifying:

table {etc}

you're saying that *every* table in the site will automatically have that style (which obviously wouldn't work too well, given what you've specified). That's because you've assigned that style to an HTML tag -- the table tag -- so all tables will be affected.

If, however, you were to create a class, you could apply it as you wish. For classes, use any word you like. Note the "dot" (period) in front of the class specification:

.table1 {etc}

Then, in the page code:

<table class="table1">

Once you get the hang of this, you may also find that it's better to use something a little more descriptive (but not l-o-n-g) as a class name; sorting through dozens of cryptic class names starts to wear a little thin. <grin>

Back to top

#3 DianeV

HR 4

Active Members
166 posts

Location:Los Angeles

Posted 15 November 2003 - 02:34 AM

I just reread the rest of your post:

> What would the code look like for a table that is 400 X 300 with 5 columns and 2 rows?

I don't know that you can use CSS to specify numbers of table columns and rows; if you can, I haven't read about it yet (which is possible) (I like the idea, though). In this case, it seems like it would be better to simply use a table.

Back to top

#4 don1

HR 4

Active Members
173 posts

Location:Marlborough, MA

Posted 16 November 2003 - 07:22 AM

I don't know that you can use CSS to specify numbers of table columns and rows...

Nope. With Cascading Style Sheets you can format what is in them. You need to create each table in the page itself.

table {cellSpacing:0; cellPadding:0; width:240; bgColor:#666699 border:0; style border: 1 solid #000000 }

how about this instead:

<table width="240" border="0" cellspacing="0" cellpadding="0" bgcolor="#666699">
<tr>
<td>your text goes here</td>
</tr>
</table>

I didn't understand what the black border bit was about. As for the second 400 x 300:

<table width="400" border="0" cellspacing="0" cellpadding="0" height="300">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

*Note that the forum software changes the code a bit so it is not seen exactly the way I made it.

Are you just beginning with CSS or html? CSS probably is not the best place to start the learning curve but if you do a google search for css tutorials you'll get more than enough pages to learn from. If you learn from examples it would be better to view the source of pages already out there to see what is going on rather than just picking up code from one of my posts. Also you can purchase or download a simple WYSIWYG software to help you get the job done. In any case, make sure you check things out on different platforms before publishing.

Back to top

#5 Craig B

HR 4

Active Members
215 posts

Location:Calgary, Alberta, Canada

Posted 16 November 2003 - 07:36 AM

Typically, you do not use css to style tables but instead to style div tags. Also, if you do decide to use css for layout, you may not need 5 columns as you can use padding and margins with a three-column layout that achieves the same effect as a five-column table layout.

Glish and many others have great examples of CSS layout if you decide to head down that road!

-Craig

Back to top

#6 don1

HR 4

Active Members
173 posts

Location:Marlborough, MA

Posted 16 November 2003 - 07:47 AM

Ahh, I got hung up on the term "table" which is specific in html. Seeing what it is you are trying to do the crazed_canuck has the link for you above.

Back to top

#7 DianeV

HR 4

Active Members
166 posts

Location:Los Angeles

Posted 16 November 2003 - 03:24 PM

don1, yes, you can do tables that way. The reason I'd style it with CSS is that if you, say, have a series of tables on different pages with the same background color or border and want to change it later, you'd have to track down every table to change it. With CSS, it's a simple CSS file edit. (And, where you're still designing the site, this ease of change can be true love. lol)

crazed_canuck, styling tables is fine. We don't know, though, what the original poster was doing with the tables (... or cells?).

Back to top

#8 Craig B

HR 4

Active Members
215 posts

Location:Calgary, Alberta, Canada

Posted 16 November 2003 - 07:56 PM

That's true. I was assuming the Skyline Jill was talking about layout.

-Craig

Back to top

#9 DianeV

HR 4

Active Members
166 posts

Location:Los Angeles

Posted 17 November 2003 - 12:49 AM

She may well have been.

Or, you may assume that I having something against over-div-ing sites. <grin>

Back to top

#10 don1

HR 4

Active Members
173 posts

Location:Marlborough, MA

Posted 17 November 2003 - 07:05 AM

yes, you can do tables that way

My bad, you are right. I would do the same but the html given above should be deleted. I was assuming html layout with div tags. But after viewing the link c_c provided I have been pursuaded to believe that is the recommendation to follow.