« previous next »
Pages: [1] 2 3

Author Topic: Css Table Design  (Read 4370 times)

Css Table Design
on: June 25, 2007, 11:00:05 AM
Hi everyone.

Wonder if someone could help me out.  Im trying to use css styles to format a table.

In html I have a table with 2 columns, column 1 is 30% and the 2nd one is 70% and the whole table is designed to take up 95% of space.

Cell padding is 5 and Cell spacing is 3 and of course the table is centered.  Below is the html that Ive used thus far.

Quote

 
   
   
 
 
   
   
 
Nameme
addresshere



As I use this sort of table on a lot of pages Id like to chuck a hand in and use a bit of css.  So Ive done the following

Created a class called .TechTable

Quote
.TechTable
{
   width: 95%;
   FONT-SIZE: smaller;
    FONT-FAMILY: Arial;
   margin-left: auto;
   margin-right: auto;
   }


and then one for the left column that has the following

Quote
.TechLeftColumn
{
   FONT-FAMILY: arial;
   FONT-WEIGHT: bolder;
        FONT-VARIANT: small-caps;
   border-style: dashed, 1px;
   border-bottom-width: thin;
   padding: 5px;
   width:33%;
}


Now from what Ive worked out.....

There is no equivilant for cell spacing at the moment (been and googled that one)
I also need a definition in the CSS for the right hand column?

Can anyone help me make  the CSS do the same this as that I do with the html version of my table?  I have done a bit of googling but not really got anywhere so Id like to take some advice from the people who know :D

Thanks
Logged

  • Offline neXus

  • Posts: 8,749
  • Hero Member
Re:Css Table Design
Reply #1 on: June 25, 2007, 11:23:35 AM
Hello :)
First of all tables suck :) not used one in two years :)

Another tip - do your code in lower case not upper case
Do you know your missing your class declarations in your table?

Code: [Select]


then when you create css for the table elements you can do..
Code: [Select]
tr.TechTable {
}

There is no css for cell spacing etc, you have to put that in your html table elements, the css you have is fine, cell spacing and padding is only html and why tables are being slowly removed from peoples code on the web.
You seem to know the idea that html is the layout, css is the style and format and your server side elements is your content etc.

can do everything as a table and more, its harder to know how to do everything but like clockedone will tell you who I have helped in his learning of it once you begin to follow it they are a better option.

Hope that was what you ment and after.
Logged
Re:Css Table Design
Reply #2 on: June 25, 2007, 11:47:39 AM
Thanks for getting back to me.  I didnt post the code for when I used the CSS stuff on my template.  Sorry about that.

I think I looked at divs but no matter what I did I couldnt get them to look like a table if that makes sense.  Will have a lookie now and see what I can come up with.

If you have any links to DIV tutorials that you recommend that would be great.
Logged

  • Offline neXus

  • Posts: 8,749
  • Hero Member
Re:Css Table Design
Reply #3 on: June 25, 2007, 12:26:04 PM
Code: [Select]








one cell of content in a table

one cell of content in a  table



one cell of content in a table

one cell of content in a  table






http://alistapart.com/articles/practicalcss/
http://www.dev-archive.net/articles/table-in-css.html
Logged
Re:Css Table Design
Reply #4 on: June 25, 2007, 14:24:40 PM
Thanks for the help. Looking into this already.

The problem that I have is that Im trying to modify the CSS so that when I get my information from the source I can display with the same tags just using CSS to manipulate the style if that makes sense?  Thats why I was wondering what formatting I could do with those tags



Logged

  • Offline neXus

  • Posts: 8,749
  • Hero Member
Re:Css Table Design
Reply #5 on: June 25, 2007, 14:31:27 PM
Then just create another set of code to represent the table layout which is exactly the same as the above but with different content.
Logged
Re:Css Table Design
Reply #6 on: June 25, 2007, 15:00:54 PM
Am I being very dense or does this code just show 4 rows saying "one cell of content in a table?"
Logged

  • Offline Mardoni

  • Posts: 2,636
  • Global Moderator
  • Hero Member
  • On the Sofa, probably ;)
Css Table Design
Reply #7 on: June 25, 2007, 15:09:11 PM
Looking at the code, Id have said 2 rows of 2 columns; 4 cells total.
Logged
Re:Css Table Design
Reply #8 on: June 25, 2007, 15:27:49 PM
just 4 rows here  :(
Logged
Css Table Design
Reply #9 on: June 25, 2007, 16:26:07 PM
probably due to float, as some browsers insist on putting a new div on a new line, only way to get around that is float... which is a little buggy
Logged

  • Offline Sam

  • Posts: 3,943
  • Hero Member
Css Table Design
Reply #10 on: June 25, 2007, 16:28:41 PM
nige is your man, hes css god
Logged
    • Tekforums.net - It's new and improved!

  • Offline Clock'd 0Ne

  • Clockedtastic
  • Posts: 10,946
  • Administrator
  • Hero Member
Re:Css Table Design
Reply #11 on: June 25, 2007, 17:11:10 PM
What you had in the first post was fine, although you dont need to explicitly set width for the second table cell as you have already defined your table width (95%) as well as the first table cell width (30%), then second cell will take up the remaining available slack space.

Dont feel pressured to start replacing all your tables with divs, tables are still useful and are perfectly valid, the argument gets banded backward and forwards about using them, but if big sites like Google, etc are happy using them so am I and thats at a professional level. Using divs often requires a lot of floating and hacks to work on all browsers for things like page footers that sit at the bottom of the screen that are done easily with tables.

You can reduce your CSS down as well, you have a lot of unnecessary markup going on and dont get too reliant on CSS2 tags, keep things simple. font-weight: bold; is fine, you dont need font-weight: bolder; as it does nothing different at the moment.

for instance:
border-style: dashed, 1px;
border-bottom-width: thin;

can become:
 border: 1px dashed thin;

This is an excellent resource for reference to CSS properties and browser compliancy:
http://www.blooberry.com/indexdot/css/propindex/all.htm#
Logged

  • Offline neXus

  • Posts: 8,749
  • Hero Member
Re:Css Table Design
Reply #12 on: June 25, 2007, 17:22:56 PM
shiftlocked, you can always add more, I only typed it up fast as an example.

Just to add to clockeds post

For mutliple border types of different types or an object with different widths on the top, bottom etc..

--> border: 1px 3px 4px 5px;
In the order of - top right bottom left
same with padding and margins

Code: [Select]

 margin-left: auto;
margin-right: auto;


can be
Code: [Select]

margin-right, margin-left: auto;
Logged

  • Offline neXus

  • Posts: 8,749
  • Hero Member
Re:Css Table Design
Reply #13 on: June 26, 2007, 16:26:41 PM
How you getting on with it shiftlocked ?
Logged
Re:Css Table Design
Reply #14 on: June 27, 2007, 11:30:12 AM
Hi Guys,
Thanks for all the help, had forgotten about these forums till a short while ago.

With regards to the divs and floats and stuff, im not too proud to admit that its a bit complex for me at the moment, I understand it but its a question of time to learn it.

Thanks for the help in reducing the css code.  Could anyone help me with the CSS side to make the table look half decent so that it would look good displaying the details like the example I gave.  Just want it to look a bit more... ermm ... nicer lol

I had an idea of alternating row colours but dont think that can be done with CSS??
Logged
Pages: [1] 2 3
« previous next »

0 Members and 1 Guest are viewing this topic.