/    Sign up×
Community /Pin to ProfileBookmark

Quick Table Help

Copy linkTweet thisAlerts:
Nov 07.2007

Ok, I’ve done this a few times before but now it’s eluding me as to how to achieve this. I want to setup a table with lets say 3 columns. I want the outside columns to expand depending on the size of the browser and the middle column (main column) to remain at say 800 pixels.

The code I have setup now to test is as follows:

<html><head><title>Test Site</title></head>
<body bgcolor = “blue”>
<table align=center width=100%>
<tr>
<td width=100% bgcolor=”green”>&nbsp;</td>
<td width=800 bgcolor=”yellow”>Blah</td>
<td width=100% bgcolor=”green”>&nbsp;</td>
</tr>
</table>
</html>

How can this be modified to meet my goal?

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@TJ111Nov 07.2007 — First of all, if this is for your entire page, you should use <div>'s and CSS. If this is just a table, you have to use <col>

<table>

<col>

<col width="800px">

<col>
Copy linkTweet thisAlerts:
@Cyan007authorNov 07.2007 — It's just for a single table at the very top of the page. I already have the page created but after further review didn't set it up properly.

Even when using <COL> I'm still running into my previous dilemna about it not presenting itself properly. Here's my test site:

http://users.zoominternet.net/~cyan/test3.html

I want the yellow section to be at 800 pixels and the green sections to take up the remaining table space on both sides of the center. So when I change the size of my browser (or resolution) it changes with it. I'm confused on what the size of my table should be (I'd assume 100% since I want it to span 100%).
Copy linkTweet thisAlerts:
@Cyan007authorNov 07.2007 — Ok, applied those changes. Only thing is that I want the center yellow section to be locked on 800px so it can't be modified in size. I was at this point before but it can still be stretched. ?

My test page is setup at http://users.zoominternet.net/~cyan/test3.html
Copy linkTweet thisAlerts:
@TJ111Nov 07.2007 — You have to use the <col> tag to specify column widths, these go after the table tag and before the first <tr>.

http://www.w3schools.com/tags/tag_col.asp
Copy linkTweet thisAlerts:
@Cyan007authorNov 07.2007 — I understand that part. For my <table width=?> What do I put for the question mark? Do I need to set that for 100%? Using the <col> tags I have it set to 800px for the middle column but when I adjust my browser it adjusts in size when I want it locked at 800.
Copy linkTweet thisAlerts:
@Cyan007authorNov 07.2007 — Ok... I believe I figured out a way to do it. I need to use a 1x1 transparent GIF file to act as a spacer to the column can't condense. Is this the best way to achieve this?
Copy linkTweet thisAlerts:
@TJ111Nov 07.2007 — I'm telling, using divs and CSS is the best way to accomplish this. Table based layouts are terrible for making changes, fixing bugs, and aren't good for SEO optimization.
Copy linkTweet thisAlerts:
@Cyan007authorNov 07.2007 — Ok, I'll look into that. Thank you.
Copy linkTweet thisAlerts:
@davidr64Nov 07.2007 — If you need a guide, you can check out this site to make a 3-column CSS layout: http://www.glish.com/css/7.asp
×

Success!

Help @Cyan007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...