HTML - How To Make A Table Stay Centered?

I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center?

Here is an example of a part of my code:

Code:

      <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
       <tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>       
       <tr>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>
        </td>
       </tr>
      </table>

1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right.

2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column.

3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column.

My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line.

I tried:
style="margin-left:20px"
and
style="padding-left:20px"
but when the title got too long it would not auto-collapse the left side, I want it to collapse!

I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column.

If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it.

My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want.

This code is a list of books that spans about 20 categories and about 400 book titles.

Thanks in advance for any help you might offer.

Hi,

I'm a little new at this, and I'm trying to put a pretty simple website together. I have a table that is the basis for the whole website design. It's pretty fixed, so I want all the widths of the table to be constant. A couple rows have fixed heights for aesthetic purposes. A couple rows I want to expand to whatever height is necessary to accomodate the content inside.

the fourth row of the table has three cells side by side that I use as the header design.
1) picture 2) space 3) title
I want all these to have fixed widths and heights.

underneath is a cell that spans the length of all three of those.
This is where I want my content.
4) content
The length of this stays fixed but the height changes as more content is addes.

The trouble is, the table cells display correctly for me as long as there is limited amount of text inside the 4) content cell.
Whenever I enter past a few sentences, the 1) picture cell starts taking up more of the width and shrinking the 3) title cell.
And this really messes up the nice spacing I had.


Any thoughts on why this would happen???

I'm just stuck. I've tried a million things, but I'm sure its something simple I can't see right now. Hopefully a pair of fresh (and knowledgeable) eyes can help!

Thanks so much,


heres my code:





[font="Courier New"]
<body>
<table width="875" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td height="75" colspan="5"><img src="../images/RichfieldLogo.png" width="250" height="75"></td>
</tr>


<tr align="center">
<td height="25" colspan="5" valign="top" class="mainmenu" style="border-bottom: solid 1px #666666; border-top: solid 1px #666666">
<h1 class="menu">
<ul>
<li><a href="#" class="mainmenu">Home</a></li>
<li><a href="#" class="mainmenu">Party in the Park</a></li>
<li><a href="#" class="mainmenu">Info</a></li>
</ul>
</h1></td>
</tr>


<tr>
<td height="20" colspan="5"><img src="../images/20spacer.png" width="20" height="20"></td>
</tr>





<tr align="left" valign="top">
<td width="190" rowspan="2">
<img src="../images/PartynParkPlaceholder.png" width="190" height="385"></td>
<td width="20" rowspan="2"><img src="../images/20spacer.png" width="20" height="20" border="0" align="top"></td>


<!-- This is where the trouble starts! I can't get these cells to stay a fixed size!!! -->

<td width="275" height="275"><img src="../images/SamplePicSmall1.png" width="275" height="275" border="0" align="right"></td>
<td width="20" height="275"><img src="../images/20spacer.png" width="20" height="20"></td>
<td width="370" height="275">
<p><font size="45px" face="Helvetica, Arial, sans-serif" weight="bold"><strong>Party
<br />
in the Park</strong></font><br />
<h2 class="datetime"><font color="#666666">LOCATION </font> Richfield Park, 345 Main St in Richfield<br />
<font color="#666666">DATE </font>Saturday, October 13 2008 <br />
<font color="#666666">TIME</font> From 8am until late afternoon<br />
<font color="#666666">INFO</font> Call 704.463.1308</h2></p>
</td>
</tr>


<!-- This seems to be the cause of it. If I have a couple sentences down here its fine, but more than a few words and it causes sheer html chaos above! -->

<tr>
<td colspan="3"><img src="../images/10spacer.png" width="10" height="10"><br /><hr width=100% size=1px color=#99CC33>
<img src="../images/10spacer.png" width="10" heigh="10"><br />
<h2 class="text">Party in the Park is an annual Richfield tradition started
in 199X to gather the town's residents and their friends together to enjoy
good food, fun entertainment and each other's company. This year we'll
have blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah. The morning will end right with our famous Cush cookoff!
Party in the Park is an annual Richfield tradition started in 199X to
gather the town's residents and their friends together to enjoy good food,
fun entertainment and each other's company. This year we'll have blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah. The morning will end right with our famous Cush cookoff! </h2>
<br /><img src="../images/25spacer.png"><br />
<p><h1 class="menu2">Features</h1></p>
<p><h1 class="menu2">Photos</h1><hr width="100%" size="1px" color="#99CC33"></p>
<p><h1 class="menu2">Flyer</h1></p>
<p><h1 class="menu2">Directions</h1></p>


</td>
</tr>

<!-- And everything from here on out seems to be fine from what I can tell -->



<tr>
<td height="75" colspan="5">&nbsp; </td>
</tr>
<tr>
<td colspan="5" valign="top"><hr width="100%" padding-bottom="1px">
<div align="right"><font color="#99CC33"><em><font color="#000000" size="-7" face="Verdana, Arial, Helvetica, sans-serif">email
us at </font><font size="-7" face="Verdana, Arial, Helvetica, sans-serif">web@gorichfield.com</font></em></font></div></td>
</tr>



</table>

</body>



thanks again for any help guys!

I have the exact same table at the very bottom of this page that is centered in both IE and Firefox...

http://www.massagelaunch.com/

but on this page I have the exact same table that IS NOT CENTERED in Firefox...any idea why?
http://www.massagelaunch.com/affiliates.html

Thanks in advance!

Anyone have any hints about why headings that are perfectly centered in Firefox are sometimes aligned left in IE?

Hi all.
I've been trying to accomplish a simple task with less to no luck, I hope somebody here can help...

I'm trying to create a single page with a solid color background, with a square image (let's say 500px * 500px) centered in the page and above the solid color, with some text centered above the image. All of this should work even resizing the window: I mean, the image should resize mantainig its proportions.

Is there any way to do this? I tried both tables and css, but had no luck...


Thank you in advance.
Melmoth

the bold stuff is what i added in to try and make it sortable and it didn't work.

Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title />

	<link rel="stylesheet" type="text/css" href="example.css"/>
	<meta name="author" content="my name" />
	<link href="http://www.joostdevalk.nl/" rev="made" />
	<script type="text/javascript" src="sortable.js"></script><meta name="generator" content="StarOffice/OpenOffice.org XSLT (http://xml.openoffice.org/sx2ml)" /><meta name="author" content="my name" /><meta name="created" content="2007-04-03T18:49:47" /><meta name="changedby" content="Ryan Gleason" /><meta name="changed" content="2007-05-04T16:38:49" /><base href="." /><style type="text/css">
	@page {  }
	table { border-collapse:collapse; border-spacing:0; empty-cells:show }
	td, th { vertical-align:top; }
	h1, h2, h3, h4, h5, h6 { clear:both }
	ol, ul { padding:0; }
	* { margin:0; }
	*.ta1 { }
	*.ce1 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-style:none; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
	*.ce2 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-width:0.0133cm; border-left-style:solid; border-left-color:#000000; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
	*.Default { font-family:Arial; }
	*.Heading { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
	*.Heading1 { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
	*.Result { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
	*.Result2 { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
	*.co1 { width:1.3516in; }
	*.co10 { width:0.7854in; }
	*.co11 { width:0.5681in; }
	*.co12 { width:0.8925in; }
	*.co2 { width:0.9925in; }
	*.co3 { width:0.6984in; }
	*.co4 { width:0.622in; }
	*.co5 { width:0.372in; }
	*.co6 { width:0.3827in; }
	*.co7 { width:0.9055in; }
	*.co8 { width:0.6661in; }
	*.co9 { width:0.6772in; }
	*.ro1 { height:0.1783in; }
	</style></head>
<body dir="ltr">
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
<table border="0" cellspacing="0" cellpadding="0" class="ta1">
<colgroup><col width="150" /><col width="110" /><col width="78" /><col width="69" /><col width="41" />
<col width="42" /><col width="101" /><col width="110" /><col width="74" /><col width="78" /><col width="75" /><col width="75" /><col width="75" /><col width="87" /><col width="63" /></colgroup>

that should be what you need..i exported an excel file as an xhtml file and read the source code and that's how it was, real unorganized and such. basically it's got stats of baseball players and i want to make them easily sortable. i created a sortable table using another piece of code but have to manually enter everything in if i do it that way.

Is it possible to make each row in a table a link to a website? (regardless of how many columns there are).

Not sure if I worded that right.
But I have a 3 column table with three rows.
And I want a row with no columns at the top that is the full width, so I can put a title in there. how do I do that?
Here is my current title.
Thank you.

Code:

<table id="box-table-b">
    <thead>
    	<tr>
        	<th width="175" scope="col">Website</th>
            <th width="69" scope="col">Lowest <br />
            Price</th>
            <th width="50" scope="col">BUY</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>xxxx</td>
            <td>x</td>
            <td><a href="#">Here</a></td>
        </tr>
        <tr>
        	<td>xxxxx</td>
            <td>x</td>
            <td><a href="#">Here</a></td>
        </tr>
    </tbody>
</table>

Hello!

Is there any way to make a table showing a folder in your FTP?

I have an FTP thats is locked, so is there anyway to make it an autologin

I just want it to show the files, not the 'Go up a directory' button

And is there anyway to make tthe links so people can click on them to open the file the directory

HOW CAN I DO THIS
Tap Back

Josh.R

Hi. I want part of the text in my table header to be bold, but I also want another part of it to be regular font. I'm kind of new to HTML. How would I do this?

Thanks,
Brad

alright, i have an ad (which is in an iframe from the advertiser) on the right side of my site thats a little bigger (by 30px) than the rest of the content on that side.

http://www.greendayauthority.com/

You'll see it on the rightside. You'll also see how because it's bigger, it forced that cell it's in to stretch, and pushes the other stuff to the side (you can see that by looking at the top banner, and how it's smaller than the content when they should be lined up).

What i want to do is maybe place that ad in a div or something so that it'll hang over the right side of the table, instead of pushing the other things away from it.

Can anyone help me out?

Despite reading multiple posts on "scrollable" table cells on the forums, I've not yet quite found the answer to my question, so hopefully I can get some feedback from all viewers out there!

I and some friends run a small Catholic arts and crafts website (www.illuminatedink.com) through which we sell products that we create. I've based the page layout on a table instead of frames or iframes. The table has 3 cells in it. The entire top "banner area" of the screen is one cell. Below that on the left we have the naviagation menu cell. The main content that someone is trying to view appears in the remaining lower right cell (also the largest).

This page works great on all the computers at my house (3 of them) and on most other computers as well. I have yet to test this in IE 7.0, but if someone else has that browser, please let me know what happens.

So, what's the problem you ask? That lower right table cell where all the content appears does not work for everyone. I just got another complaint today that no scroll bar appears and the person can only see what's in the top of cell, there is no "scrollability". Here is a sample (with notes made by me in ** NOTE ** format). The notes are of course not in the actual code, I am showing only the code really matters here.

Code:

<BODY STYLE="margin-top: 0px; margin-left: 0px">
  <TABLE CELLPADDING=0 CELLSPACING=0 HEIGHT=590 WIDTH=1000>
    <TR HEIGHT=90>
      <TD WIDTH=1000 COLSPAN=2 STYLE="background-image:url('http://www.illuminatedink.com/images/background/banner.jpg')">
        &nbsp
      </TD>
    </TR>

    <TR HEIGHT=500>
      <TD VALIGN=top WIDTH=200 STYLE="background-image:url('http://www.illuminatedink.com/images/background/menu_bar.jpg');background-repeat:no-repeat">
        <TABLE ALIGN="center" CELLSPACING=0 CELLPADDING=0>
          **Navigation menu on the left side goes here**
        </TABLE>
      </TD>
      
      <TD WIDTH=800 VALIGN="top">
        <DIV STYLE="overflow:auto;height:490px;width:800px;position:absolute;left:200;padding-right:30px; padding-left:0px"><MAP NAME="page_links">
          **All code for the scrollable cell in the lower right goes here**
        </DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

So, can anyone possibly tell me why this would have a scroll bar in some browers and not in others? Or does anyone have any code changes I could make that may guarantee that they will get a scroll bar in that lower right cell? The complaints that I have received mainly seem to be from Mac users using IE for Mac. But I just had someone who had a brand new Dell with Windows XP Prof. and the most recent IE 6, which is exactly the configuration I run, but didn't get a scroll bar when I did. Ideas? Thank you!

Well I have so much work tonight and I just can't get this down.

http://phs.psdr3.org/WebsterUniversi...HTMLQuestions/

Question number 6

Follow all directions

give me the code

pplleeaassee

Hello lady's and gentelmen..


I have a really short question (almost so small it's not even worth waste a whole thread on it!) But, here it goes

When I go to my homepage: www.sp34k.dk and maybe select "blog", then I can see the link "www.sp34k.dk/blog.htm" and if it go to billeder (picture) then its www.sp34k.dk/billeder.htm.

Are there any possibility for that I can do such it dosent change? So it would ALWAYS stay as "www.sp34k.dk"?


Kind regards
Mike Bertelsen
Denmark

I have listed items inside a div that display just find in FF v3.0.1, but not in IE v7. Here is the link to my page.

http://web.missouri.edu/~mdsybf/


Here is the CSS of a class div that surrounds the previously mentioned div.

.MainEdit {
clear:both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
text-decoration: none;
float: left;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 10px;
width: 700px;
clear: right;
display: inline;
vertical-align: top;
height: auto;
}

What is wrong with my code that makes the listed items appear outside the div box?