Author Topic: Css Table Design (Read 4369 times)

Clock'd 0Ne · **Reply #15 on:** June 27, 2007, 14:35:16 PM

Re:Css Table Design

Reply #15 on: June 27, 2007, 14:35:16 PM

Alternating table row colours can be done easily with CSS.
give the alternating s classnames of "rowA", "rowB", etc.

then just refer to
tr.rowA td { background: #333; }
tr.rowB td { background: #555; }

Piece of cake.

Ill give you a very nice layout later tonight when i have time.

shiftlocked · **Reply #16 on:** June 29, 2007, 10:41:26 AM

Re:Css Table Design

Reply #16 on: June 29, 2007, 10:41:26 AM

interesting. In FireFox, the dashed border doesnt appear but in IE it does. God.. cross browser compatibility issues here I come

Clock'd 0Ne · **Reply #17 on:** June 29, 2007, 10:49:02 AM

Re:Css Table Design

Reply #17 on: June 29, 2007, 10:49:02 AM

Both browsers should render the dashed border, albeit slightly differently. Paste your CSS for me, please?

Also get into good habits, start your sites with some uniformity and overwrite default browser settings for certain elements, like body and form margins, setting a default font for the site to use:

Code: [Select]


body, form { padding: 0; margin: 0; }
body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #656565; }

a img { border: 0; }

a { color: #333333; text-decoration: none; }
a:hover { color: #000000; text-decoration: none; }

I would also recommend you stop using imprecise measures like thin thick and use precise measures like pixels instead, you can guarantee how your sites will be rendered then.

shiftlocked · **Reply #18 on:** June 29, 2007, 11:02:44 AM

Re:Css Table Design

Reply #18 on: June 29, 2007, 11:02:44 AM

Thanks for getting back to me Clockd help is muchos appreciated

Code: [Select]


.TechTable
{
	width: 95%;
	margin: auto;
	padding: 15px;
	border-collapse: collapse;
	FONT-SIZE: smaller;
	FONT-FAMILY: Arial;
	}

.TechLeftColumn
{
	width: 30%;
        text-align: left;
	padding: 5px;
	border-style: dashed, 1px; 
}

.MainleftColumn
{
    FONT-SIZE: smaller;
    BACKGROUND-COLOR: #ffffcc
}

neXus · **Reply #19 on:** June 29, 2007, 11:51:02 AM

Re:Css Table Design

Reply #19 on: June 29, 2007, 11:51:02 AM

First of all - all lower case m8, keep everything lowercase and avoid using case in css and your xhtml
I know if you program you would make a function myClass in its naming format but in xhtml and css keep it lower case and your missing a ; on your last line of code

w3 is the place to help you out by the way: http://www.w3schools.com/css/css_border.asp

shiftlocked · **Reply #20 on:** June 29, 2007, 13:17:38 PM

Re:Css Table Design

Reply #20 on: June 29, 2007, 13:17:38 PM

(edited, intelligence chip just kicked in..)

Ill be changing things to keep lower case shortly, thanks for the tip and Oooops on that last;

Code: [Select]

.TechTable
{
	width: 95%;
	margin: auto;
	padding: 15px;
	border-collapse: collapse;
	font-size: smaller;
	font-family: Arial;
	}

.TechLeftColumn
{
	width: 30%;
    text-align: left;
	padding: 5px;
	border-bottom: 1px dashed #00FF00;
	
}

Thats the updated code, so from what I gather at the moment (please bear with me)

Centered Table
95% of the broswer screen
borders treated as one
Small Fonts

Left hand column
30% width
padded
and has a 1px green dash on there.

Am I correct in assuming that to set a style for the right hand column I would have to create another CSS style?

neXus · **Reply #21 on:** June 29, 2007, 13:35:56 PM

Re:Css Table Design

Reply #21 on: June 29, 2007, 13:35:56 PM

yes

If it different to the other

(small thing but still - your colour hex code - lower case

Sam · **Reply #22 on:** June 29, 2007, 15:12:38 PM

Css Table Design

Reply #22 on: June 29, 2007, 15:12:38 PM

Dont worry about divs. Theyre a load of bollocks used by people who dont design sites for a living but design them for fun and thus can mess about for 12 hours to do what takes 10 minutes in a table.

shiftlocked · **Reply #23 on:** June 29, 2007, 15:26:19 PM

Re:Css Table Design

Reply #23 on: June 29, 2007, 15:26:19 PM

Is there a way to make the background in the left column only populate say 80% of the cell?

neXus · **Reply #24 on:** June 30, 2007, 01:28:36 AM

Re:Css Table Design

Reply #24 on: June 30, 2007, 01:28:36 AM

Quote from: shiftlocked

Is there a way to make the background in the left column only populate say 80% of the cell?

Not with tables no
Ignore Sam, he just cant grasp divs and css at all and what he cant grasp he tends to hate out right

Clocked on the other hand picking it all up very well
And you can make full blown sites with easse as a working profession (since the company my brother works for does and so do most decent companies now

)

Sam · **Reply #25 on:** June 30, 2007, 01:55:09 AM

Css Table Design

Reply #25 on: June 30, 2007, 01:55:09 AM

Look nige agrees with me and so do google.
QED.

neXus · **Reply #26 on:** June 30, 2007, 10:19:25 AM

Re:Css Table Design

Reply #26 on: June 30, 2007, 10:19:25 AM

Funny how you like google and their opinion but not the iphone although they are putting a lot of money into and will be releasing more applications on it over time and they think it will be a big thing, but you dont

Clock'd 0Ne · **Reply #27 on:** July 02, 2007, 09:44:24 AM

Re:Css Table Design

Reply #27 on: July 02, 2007, 09:44:24 AM

Quote from: shiftlocked

Is there a way to make the background in the left column only populate say 80% of the cell?

If you mean you want it to sit 20% inset just use background-position: 20% top;

shiftlocked · **Reply #28 on:** July 02, 2007, 11:20:46 AM

Re:Css Table Design

Reply #28 on: July 02, 2007, 11:20:46 AM

I just found a really nice program for the mac CSSEdit which is making things a lot easier.

Today I r going to be with the table row and seeing how the color thing goes and then the background inset thing that was posted. Can I just say again thanks to people for helping a noob out here

Divs and Floats... after I got this done thats my next thing

shofty · **Reply #29 on:** July 02, 2007, 11:38:54 AM

Re:Css Table Design

Reply #29 on: July 02, 2007, 11:38:54 AM

Quote from: shiftlocked

Divs and Floats... after I got this done thats my next thing

need to read this then.

http://www.brainjar.com/css/positioning/

read it a few times. it takes a while to make sense of it.

Matt

News:

Author Topic: Css Table Design (Read 4369 times)