Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table help

Status
Not open for further replies.

Kryzbn1

Technical User
Nov 26, 2005
7
US
Im trying to make a table on a page for links. It is going to have the logo in the top left corner then 1 row and 4 colums across the top and to the right. Then I want to nest a table in that one and make more links on the left side going down with 1 colum and 7 rows. I cannot seem to get this working right. Anyone that could help me out that would be cool.
 
It would be helpful if you posted the code that doesn't work. Then we might be able to help guide you.

Mike Krausnick
Dublin, California
 
<table
width="100" valign="top" border="5"
<tr><th> logo </th></tr> <tr><th> service </th </tr>
 
First, let's fix the errors:
1. Missing a closing bracket on the table tag: insert a ">" after the "5"
2. Missing a closing bracket in the second table header closing tag: insert ">" after second "</th"
3. Remove the extra spaces between the first </tr> and the second <tr> and after the second </th>.

That said, I get a nice two row one column table, both in IE6 and Firefox. What were you expecting?

Mike Krausnick
Dublin, California
 
Im hoping to get a table that goes across the top of the page. Then to nest another table that will go down the left side. I can't figure out how to do it.
 
You specify width as 100. That means 100px, since if no unit is specified, that means pixels. If you want it to stretch across, you need to say width="100%". Even better would be if you would move the style to css.
 
Thank you both for your help so far. How can I get the table across the top of the page with 1 row and 4 different colums to go left to right after the logo? Everytime I try to add another colum it goes underneath. Here is my code so far.
<table
width="15%" valign="top" border="5">
<tr><th> logo </th></tr>
<table
width="15%" align="left" border="5"
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
 
I suggeste you read up on tables a little bit. Here's a good simple reference:
<tr> is a table row element so every time you initiate <tr> and close </tr> one row will be rendered. Within that row you can put as many <th> (table header) or <td> (table cell) elements as you want. In your case, you would put four.
 
Thank you for that link it really helped me understand how tables work better. I have my table basically how I want it now but Im wondering how do you change the size and space between each box? Like how can I make this table look more symmetrical. Here is what I have for my table its outline is what I want but it looks small and out of place.
<table
width="15%" valign="top" border="5">
<tr><th>logo</th><td>services</td><td> services</td><td>

services</td><td> services</td></tr>
<table
width="10%" align="left" border="5"
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
<tr><th> link </th></tr>
</table>
 
To get a symetrical look, put widths on individual columns, not the table as a whole. For example, if you have 4 columns, put [red]width="25%"[/red] in each <td> definition. If you want to put a width on the table, make sure it's wide enough to hold all the links. You can use px, em, or % measurements. But to start, try not having a width on the table and see how that looks, then go from there.

You can also add spacing between cells by using the CELLSPACING and CELLPADDING attributes. Again, w3schools has good have syntax and usage examples.

An observation if you will permit: You are using the <th> tag instead of <td>, and while that will work, the context in which you are using it is not what <th> is intended for. <th> is intended as a documentation tool - to define a [red]t[/red]able [red]h[/red]eader, that is, the column heading for a table of data. It would be better to use a style -
Code:
.
.
<td style="font-weight:bold">
.
.

After you get more experience, you'll want to convert all the table stuff to styles anyway, and you'll define the link style separately outside the <td>



Mike Krausnick
Dublin, California
 
Thank you both so much. I have tons to learn but you guys already at least doubled my knowledge in this thread.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top