table to css

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

table to css

Post by bytte »

I'm having a small problem.
I'm building my website, trying not to use any tables, in favor of CSS.
I want this script to be converted to a CSS script:

Code: Select all

<table width="650" bgcolor="#CCCCCC">
<tr>
<td align="left">Left</td>
<td align="center">Center</td>
<td align="right">Right</td>
</tr>
</table>
It's so simple. Yet I don't see a solution. Can anyone help me?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Please use

Code: Select all

and

Code: Select all

tags where approriate when posting code. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url]

Ask and the Great Google provides.

http://glish.com/css/7.asp
http://www.pixy.cz/blogg/clanky/css-3col-layout/

the second one is probably the better one to use as example..
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

Post by bytte »

Thanks. But... it's not correct. My table has a fixed width. The examples only show solutions for when the contents scale with the width of the browser window.
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post by kettle_drum »

Something like:

Code: Select all

<html>
	<head>
		<style>
			#table {
				width: 650px;
			}
			.table-part {
				float: left;
				background-color: #cccccc;
				width: 33%;
			}
		</style>
	</head>
	<body>
		<div id="table">
			<div class="table-part">
				Left
			</div>
			<div class="table-part">
				Center
			</div>
			<div class="table-part">
				Right
			</div>
		</div>
	</body>
</html>
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

Post by bytte »

Thanks a lot kettle-drum.
Now, just one more question. Can the whole thing be centered on the page?
like when you would use <table align="center">?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

add following line after line 5 :

Code: Select all

text-align:center;
that will center the table's contents
bytte
Forum Commoner
Posts: 75
Joined: Sun Nov 23, 2003 8:20 am
Location: Belgium

Post by bytte »

I don't want the table's contents to be centered. I want the whole thing to be centered. So the "table" should appear horizontally in the middle of the screen.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

align (hint) the div.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

I thought of telling him that but that would affect all the div's in the body. isn't it?
Post Reply