HTML - Tables Layout

Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code.

How I want it to look:


How it looks now:


I want the tables to line up at the top and re-size according to each other so they're always aligned at the top.

Code: coming in next 2 posts

I have my table all finished and everything.. it looks nice, except the fact that my words.. some of them are cut off. anyone know how to fix this? I have tried making my table smaller in width than my "div", but that still doesn't work.

If you could please help me I would greatly appreciate it, and I would like to thank you in advance.

I've been having some issues with my site. It looks fine in IE but it doesn't look correct in Firefox, Opera and Safari. The tables are misaligned and I am at a total loss. Can anyone help me out. Thanks

here is the link;

http://wwwdotcapleeconsultingdot.com

Code:

     <table width="400" border="2" class="pay" id="pay">
      <col class="itemsDesc" />
	   <colgroup span="2" class="firstCol" /> 
       <colgroup span="1" class="feeCol" /> 
      <thead>
		<tr>
		<th>Lessons</th>
		<th>Per Term</th>
		<th>Per Year</th>
		</tr>
        </thead>
        <tbody>
          <td>30 minutes</td>
          <td>$600</td>
          <td>$1100</td>
        </tr>
        <tr>
          <td>45 minutes</td>
          <td>$850</td>
          <td>$1600</td>
        </tr>
        <tr>
          <td>60 minutes</td>
          <td>$1100</td>
          <td>$2100</td>
        </tr>
        </tbody>
      </table>

and my css:

Code:

*                        {margin: 0px; padding: 0px}
body                     {font-size: 14px; 
                          font-family: 'Lucida Grande', Verdana, sans-serif}
table.pay				 {table-width: 400px; border: 10 px outset rgb(68, 76, 169)}
table.pay thead			 {background-color: ivory; border: 1px}
table.pay col.firstCol   {background-color: rgb(255, 255, 192)}
table.pay col.feeCol     {background-color: rgb(232,232,255)}
table.itemsDims		 {width:12%;}

im supposed to create a heading row group, a body row group, and column groups containing one column element belonging to the firstCol class, and another column element belonging to the feeColumns class which should span two columns in the web table.
was just wondering where im going wrong here since when i do my css.. the background colors or no changes seem to be applied to the columns or the headers (thead)

can someone please tell me how i can do a table with just 1 border line - as when i do it in dreamweaver it always gives me 2 border lines - see below for my code ..thankyou
<table width="311" border="1" bordercolor="#990000">
<tr>
<td width="301" height="147" colspan="2">&nbsp;</td>
</tr>
</table>

i have tables.. http://teamsquirrels.net
when one expands it goes under or over the other i want it to push the other one across how can i do this???

Hey guys, Im trying to to add images to the left and right of an area on my site at:

www.darkregions.com

I attached a picture to this post with red circles of where I want the images to be. The problem is, I havn't done any HTML in a long time and I tried fooling around with the code to try to get the images in those locations but couldn't do it.

Could someone please view the source of the main page and tell me what I need to add/change to get images in those two locations? Thanks a bunch to anyone who helps!

EDIT: Title is supposed to be "Tables or CSS"

I know, I know - HTML Tables are the spawn of Satan - however, I have a tabbed content box made from html/css/js - when you click on a tab, the content (underneath) changes accordingly.

My questions is, I will be having a static list, with the corresponding answers (to the data in the list) targetting from an Excel Driven database - don't ask me why, just what my boss wants...

Here is what I have so far:

Quote:
<TABLE CELLPADDING="2" CELLSPACING="2">

<TR><TD>Sponsor ID:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Client Number:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Sponsor Name:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Brand Name:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Status:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Support Tier:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Sponsor Phone:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Support Phone Number:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Support Email Address:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Parent Name:</TD><TD>FILLER TEXT</TD></TR>

<TR><TD>Misdirect Scripting:</TD><TD>FILLER TEXT</TD></TR>

</TABLE>
He wants the content separated in a "ruled" look, like Excel - however, I didn't know if it would be cool to just use HTML - or if there is another way to do this - It's not going out on the internet (it's going on our Intranet via SharePoint) so I'm not worried about conjunctions and standards (not using HTML tables), etc.

Just need to know if there is another way to separate the info with a solid black line - horizontal/vertical between the cells - that looks better than an HTML table border.

Thanks!

Any idea on how I can get a table with rounded edges?

Hi, im relatively new to html and I need help with creating tables for making a proffesional site for a practice assignment. Iv'e attached an image of the way I would like the site to look... I also need help with one other thing, when the mouse pointer is moved over the buttons at the top id like them to display a drop down menu of sub categories.
Thanks in advance

Hi, I have some tables on a page and I am really really bad at them. I need help with this one page.
What I am trying to do is to get the two tables to the right scooted over a little more to the center and wider. Im just trying to get it to look nice and centered. If anyone can help with this I would really appreciate it. Thanks

Hey htmlforum and members
can someone help me out with a carousel for image *small_blank.png*..(just start me off)
thanx...
-tikki-
PHP Code:
<tr>
        <td colspan="3" rowspan="2">
            <img src="imagesxx/small_blank.png" width="234" height="83" alt=""></td>
        <td>
            <img src="imagesxx/spacer.gif" width="1" height="74" alt=""></td>
    </tr> 


i have the script needed http://www.dynamicdrive.com/dynamici.../carousel2.htm

Back in 2004, i created a site, with tables. Have no idea how I did it, someone must have helped me. I want to update that site and make the center section wider than the sides (the sides can be of equial width). The URL is http://www.ilovejesus.com/lot/awesomebks/news.shtml

Can someonehelp me with this? I need the code from the beginning of the table to the end of that column, that is Column 1, (left side) back to top for Column 2 (center), back to top for Column 3 (right side) and to the bottom of that column. I would like the center column to be at least 2x as wide as the side columns. Tell me how to end the tables and begin the text which will be straight across page. Thanks.

hey everyone, pretty simple question i am supposing, how do i stop the text in my tables from wrapping to fill the space inside the cell. The text in each cell flows over into a second line, and I end up getting writing that has huge spaces between each word, to try and fill out the line. I still want two lines, just normal sized spaces between words if that makes sense...

Hello everyone.

Im making a website for my company and i need a little help.

I made a table and tried to put a fixed width on it so then I could put text in it. Problem is,

-when i type with no spaces ex aaaaaaaaaaaaa the text just keeps going forever instead of dropping down to the next line

Also Ive been having some other problems

-if I zoom in to like 200% on IE my text doesnt stay centerd with the page, it stays centered with the screen

-And if I zoom in really far in Fire Fox my background stays centered with the screen instead of the page

I made the page using photoshop and exported as html to get me started so ill post the whole script. Its not a whole lot.

---------------------------

<html>
<head>
<title>K2 Layout 3-0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-image: url(images/bg2.jpg);
background-repeat: repeat-y;
background-position: center;
background-color: #0d141e;
}
body,td,th {
color: #FFF;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (K2 Layout 3-0.psd) -->
<center>
<table id="Table_01" width="1024" height="225" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">
<img src="images/K2-Layout-3-0_01.gif" width="93" height="225" alt=""></td>
<td colspan="6">
<img src="images/K2-Layout-3-0_02.gif" width="840" height="166" alt=""></td>
<td rowspan="4">
<img src="images/K2-Layout-3-0_03.gif" width="91" height="225" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/K2-Layout-3-0_04.gif" width="714" height="1" alt=""></td>
<td rowspan="2">
<img src="images/K2-Layout-3-0_05.gif" width="126" height="43" alt=""></td>
</tr>
<tr>
<td>
<img src="images/K2-Layout-3-0_06.gif" width="71" height="42" alt=""></td>
<td>
<img src="images/K2-Layout-3-0_07.gif" width="211" height="42" alt=""></td>
<td>
<img src="images/K2-Layout-3-0_08.gif" width="141" height="42" alt=""></td>
<td>
<img src="images/K2-Layout-3-0_09.gif" width="163" height="42" alt=""></td>
<td>
<img src="images/K2-Layout-3-0_10.gif" width="128" height="42" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/K2-Layout-3-0_11.gif" width="840" height="16" alt=""></td>
</tr>
</table>

<table id="Table_02" fixed width="830" border="0" cellpadding="0" cellspacing="0"><tr><td>

Text Here Text Here Text Here Text Here

</td></tr>
</table>
</center>
<!-- End Save for Web Slices -->
</body>
</html>

--------------------

Any help at all appreciated
Thanks