Cory Posted July 8, 2006 Share Posted July 8, 2006 Hello everyone, I have one question concerning tables. How can I put other tables side-by-side, much like a new row, however it will be much larger. Refer to this image for an example, the sqaure highlighted in red is where I would like to insert the table, my only question is how would I be able to do this? Would it require more than tables? Thanks to anyone that can answer. Link to comment Share on other sites More sharing options...
Ryusuke Posted July 8, 2006 Share Posted July 8, 2006 I'd love to have something like thatWell I do...it's just that it's uglythis what you want? http://www.urbanfreestyle.co.nr/homepg.htm Link to comment Share on other sites More sharing options...
Cory Posted July 8, 2006 Author Share Posted July 8, 2006 Yes, something similar to the updates table on the right-hand side of the left menu. Link to comment Share on other sites More sharing options...
Ryusuke Posted August 9, 2006 Share Posted August 9, 2006 DOES NO ONE KNOW??? Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 9, 2006 Share Posted August 9, 2006 Its pretty simple if you are using tables. <table> <tr> <td>Navigation</td> <td rowspan="3">Main content box</td> </tr> <tr> <td>Affiliates links</td> </tr> <tr> <td>shoutbox</td> </tr></table> The key to making it work is that second <td> tag. Rowspan = 3 will make that column be as tall as 3 rows!If you are trying to figure out how to make the banner section bigger, you can just use colspan=2. Colspan ===> Column span.P.S. I can't view your first image, but I think thats what you were asking for . . . Link to comment Share on other sites More sharing options...
Ryusuke Posted August 18, 2006 Share Posted August 18, 2006 ^???I put that into the TRy it editor thing and it is just text like soNavigation Main content box Affiliates links shoutbox Link to comment Share on other sites More sharing options...
dcole.ath.cx Posted August 18, 2006 Share Posted August 18, 2006 that's correct... it should.you may want to replace <table> with <table border='1'>to see the border around each cell.also if you want all that blank space so it takes up the whole screen, you should add width='100%' and maybe height='100%' to the same place you added border='1' Link to comment Share on other sites More sharing options...
Paraiya Posted August 19, 2006 Share Posted August 19, 2006 But the boxes are tiny.I added the width and height but it only went wide. It didn't get any larger vertically. Link to comment Share on other sites More sharing options...
Ryusuke Posted August 20, 2006 Share Posted August 20, 2006 Can anyone....please....pleasegive direct instrustions Link to comment Share on other sites More sharing options...
Err Posted August 20, 2006 Share Posted August 20, 2006 Can anyone....please....pleasegive direct instrustions Never mind. Link to comment Share on other sites More sharing options...
dcole.ath.cx Posted August 20, 2006 Share Posted August 20, 2006 I'm sorry, I forgot you can't use % in height...add height='600px'px is for pixels---- ---here is a very simple template I once made, it has alot of comment tags so you know what's happening... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Title of document</title></head><body><center><h1>My Web Site</h1><table width='100%' border='1'> <tr style=""> <!-- style='background-color: lightblue;' is the code for cell BG color --> <!-- style='background-image: URL (image location);' is the code for cell BG image --> <td width='20%' style='background-color: lightblue;'> <!-- Change URL (Address) to the page address you want the link to go to --> <!-- Change Explain to the discription of the page the link is going to--> <!-- Change LINK to what the user will see (EX: HOME) --> <a href='URL (Address)' title='Explain' target='_self'>LINK</a><br> <a href='URL (Address)' title='Explain' target='_self'>LINK</a><br> <a href='URL (Address)' title='Explain' target='_self'>LINK</a><br> </td> <td align='left'> <b>Page</b><br> your text goes here <br><br> all directions to make this page look like what you want is in comments in the page source! <br> For any Question go to <a href="http://dcole.ath.cx/forum.php" title="http://dcole.ath.cx/forum.php" target="_blank">http://dcole.ath.cx/forum.php</a> <br><br> <!-- <br> is the same as enter --> <!-- <p>text here</p> is a paragrph --> <!-- <b>text here</b> is for bold text --> <!-- <h1>text here</h1> is for headings, 1 can be a number 1-6 --> <!-- <em>text here</em> is for emphasized text --> <!-- <i>text here</i> is for italic text --> <!-- <img src="URL (Address)" width="WIDTH" height="HEIGHT"> is for images. you need to change URL (Addess), WIDTH, and HEIGHT --> </td> </tr> <tr> <td colspan='2'> <a href='URL (Address)' title='Explain' target='_self'>LINK</a> | <a href='URL (Address)' title='Explain' target='_self'>LINK</a> | <a href='URL (Address)' title='Explain' target='_self'>LINK</a> </td> </tr></table></center></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 22, 2006 Share Posted August 22, 2006 You can use percent heights, there is nothing wrong with that. I do it all the time. But you do need to make sure that the parent elements have heights. It would be nice if browsers were a little smarter about it, but the problem is if you have a div inside the body, and the div has a percent height but the body doesn't have a height, the browser doesn't know what height to make the div because it is a percent of an undefined height on the body. If you want to use percent heights, make sure you set at least the body element, and maybe also the HTML element, to be 100% height. That way, the body is said to be 100% of the viewport, and from then on the browser can calculate percentages of the body because it knows what the height is.You can try it yourself though, make a div with an absolute height, like 500 pixels, and from there you can make divs inside it with percentage heights. The browser just needs to know the height of the parent in order to give the child a percent. Link to comment Share on other sites More sharing options...
Machiavelli Posted August 22, 2006 Share Posted August 22, 2006 I am having the same problem... I'm trying to put a vertical shaped table on the left side of the webpage.... the problem is the more links i add to that table and the bigger it gets vertically... the more it pushes the table that is centered in the webpage..... down the webpage.... difficult to describe it... but best way i think is if you reply to this thread and you look at the reply form... you have the smilies on the left in a vertically shaped table and then you have the center table where you type your reply... that is what im trying to do without the smilie table pushing the center table down the webpage as I put more smilies (in my case links) in the vertically left table.... any help is deeply appreciated... two tables side by side... perfectly aligned at the top.... to each other... the faster you can reply with the solution the better because I am trying to finish a project I should of finished long time ago ... Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 22, 2006 Share Posted August 22, 2006 You can use divs with float left and float right style.Thats what I've been experimenting with, and it comes out Like This !!There are some bugs with it though. . . . Link to comment Share on other sites More sharing options...
Machiavelli Posted August 22, 2006 Share Posted August 22, 2006 You can use divs with float left and float right style.Thats what I've been experimenting with, and it comes out Like This !!There are some bugs with it though. . . .Exactly what I want... where the "Click here to register" and "navigation" tables are next to the "Main section/Content table".... just imagine one vertical table instead of two (Click Register/Navigation)... so put the tables inside DIV tags? ... what would it look like... could you give me example(s)? of the coding.... Link to comment Share on other sites More sharing options...
justsomeguy Posted August 22, 2006 Share Posted August 22, 2006 The problem you are seeing with one table moving the other one down is because the table is centered vertically instead of being aligned on top. You can use CSS on your table container to get them both aligned to the top. <table> <tr> <td style="vertical-align: top;"> table 1.... </td> <td style="vertical-align: top;"> table 2.... </td> </tr></table> Link to comment Share on other sites More sharing options...
Machiavelli Posted August 22, 2006 Share Posted August 22, 2006 The problem you are seeing with one table moving the other one down is because the table is centered vertically instead of being aligned on top. You can use CSS on your table container to get them both aligned to the top.<table> <tr> <td style="vertical-align: top;"> table 1.... </td> <td style="vertical-align: top;"> table 2.... </td> </tr></table> Ok another problem i have is that the vertical table moved the center table a little to the right... so now the center table isn't aligned with the other tables below it who are centered... Link to comment Share on other sites More sharing options...
justsomeguy Posted August 22, 2006 Share Posted August 22, 2006 Then the width of the left table is probably changing. You should set a specific width for it and see if that fixes the problem. Link to comment Share on other sites More sharing options...
Machiavelli Posted August 23, 2006 Share Posted August 23, 2006 Then the width of the left table is probably changing. You should set a specific width for it and see if that fixes the problem.I have the width at 100... alot of space between table 1 (vertical one) and table 2 (the centered one) below is the beginning code: <table bgcolor="purple" border="0" align="left" width="100"> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 23, 2006 Share Posted August 23, 2006 You might want to take a screenshot of the page and measure the table yourself in an image editing program. If the table is more than 100 pixels, then something inside the table is making it larger. You might have a link that is larger then that, which would stretch out the table. Link to comment Share on other sites More sharing options...
Machiavelli Posted August 23, 2006 Share Posted August 23, 2006 You might want to take a screenshot of the page and measure the table yourself in an image editing program. If the table is more than 100 pixels, then something inside the table is making it larger. You might have a link that is larger then that, which would stretch out the table.I'm pretty sure its only 100 pixels.. its pretty thin.. and the links are just text links... short words... there is alot of space between the two tables... the back ground color of the webpage is black so its a big space of black between the tables... is there any way to move the center table more to the left and realign it with the tables below it? .... Link to comment Share on other sites More sharing options...
aquatsr Posted August 23, 2006 Share Posted August 23, 2006 I'm pretty sure its only 100 pixels.. its pretty thin.. and the links are just text links... short words... there is alot of space between the two tables... the back ground color of the webpage is black so its a big space of black between the tables... is there any way to move the center table more to the left and realign it with the tables below it? ....I don't know what you're doing but in my experience it is better to use css for a table-like layout. Link to comment Share on other sites More sharing options...
holmedwa04 Posted August 23, 2006 Share Posted August 23, 2006 Yes, something similar to the updates table on the right-hand side of the left menu.This is really simple when you know how to use tables...You might like to use the code below:<table width="100%" border="1"><tr height="size in percent or pixels"><td colspan="2">This is you banner.</td></tr><tr height="size in percent or pixels"><td colspan="2">Insert you links here, try using center and seperating you links with this "|" and add some  if you need to.</td></tr><tr><td width="30%"><table border="1"><tr><td>Navigation, you also may like to use the valign to set the alignment of text. I have nested this table inside a cell of my original table, it just makes things easier.</td></tr><tr><td>This is other links and aflicates.</td></tr><tr><td>This is your Shoutbox.</td></tr></table></td><td width="70%">This is where the main body and content of your site should be</td></tr><tr><td>This is an edit, I forgot to add the Contacts cell!</td></tr></table> It really is as simple as that, you may like to use the cellspacing="0" cellpadding="0" and border="0" if you want content in the cells to join up from one cell to another exactly, put those codes in the <table> tag like this: <table cellspacing="0" cellpadding="0" border="0"> I have tested this code, and it works for me, so I hope it works for you, good luck! Link to comment Share on other sites More sharing options...
Machiavelli Posted August 26, 2006 Share Posted August 26, 2006 There has to be a simplier coding for putting a vertical table on the left side while having everything else centered on the webpage (banner ads, headers, etc...) if not then im better off just making a horizontal table below at the bottom of the page.... I wanted the table on the left side because not all visitors go to the bottom of the page.... so wanted to give the table (with links to other websites) the maximum exposure by having it on the left side next to the galleries... Link to comment Share on other sites More sharing options...
holmedwa04 Posted August 28, 2006 Share Posted August 28, 2006 The code I have given there relates to making a table like the diagram shown in post #4, but I think I might have forgotton to add the contacts cell, I will just edit it now. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now