Quick HTML Question

ps2cho · May 11, 2005

Ok as the title says, i have a quick question. I understand that this involves tables, but i have not dealt with tables before.

What i want to do is put two pictures next to each other on the same line, not seperate lines.

what would be the code for that?

As i said, i dont know how to use tables yet...

sorry

thanks, ps2cho

Fugue · May 11, 2005

Html tables have three main elements.

The table tag <table/>
The table row tag <tr/>
The table cell tag <td/> (Table Definition)

SO...

In the body of the html document you would want a table where there are two table cells in at least one row (where your images are).

Code:

<html>
    <head>
        <title>My Title</title>
    <head/>
    <body>
[COLOR=Red]        <table>
            <tr>
                <td>
                    <img src="image1.jpg" height="100" width="100"/>
                </td>
                <td>
                    <img src="image2.jpg" height="100" width ="100" />
                </td>
            </tr>
        </table>[/COLOR]
    </body>
</html>

Now if these images still don't appear next to each other you can always adjust the height or width attributes to accommodate (if the images are too big).

Now what if you have a third image in the next row? Well since you have on row with two cells and the next row only has one cell you have to stretch that next cell to match it. You do this using the colspan attribute.

Code:

<html>
    <head>
        <title>My Title</title>
    <head/>
    <body>
       <table>
            <tr>
                <td>
                    <img src="image1.jpg" height="100" width="100"/>
                </td>
                <td>
                    <img src="image2.jpg" height="100" width ="100" />
                </td>
            </tr> 
            [COLOR=Red]<tr>
                <td colspan="2">
                    <img src="image3.jpg" height="100" width="100"/>
                </td>
            </tr>[/COLOR]
        </table>
    </body>
</html>

Anyway that should give you a start!

ps2cho · May 11, 2005

Thank you so much, that makes sense

That was a real good explanation, thanks so much
ps2cho,

ps2cho · May 11, 2005

that worked perfectly. Ok i have one more question...

Now i have the pictures next to each other, but they are literally Right next to each other.
How can i make it so that the left picture is on the left side of the page and right picture is on the right side?

I tried using

<left> <a href="mypic></a> </td><td> <right> <a href="mypic"></a>

but no worky

Fugue · May 11, 2005

OK this here there is some grey area (aka a few ways to do this), but since we're talking tables I'll keep it in that context.

First off, when working with tables it's always good to give it a border of 1 so you can "see" what's going on. This help if things start going awry!

Code:

...
<table border="1">
...

You can always erase the border attribute if you don't want a border later.

The first thing you can do is give a size to the table. Right now the default behavior of the browser is make the table just big enough to fit its contents. Let's give the table a width of 300 (note you can also give the width as a percentage of the browser. If you do this, resizing the browser will change the size of your table... it all depends what you want). Also, the <td> elements have an attribute called align we can use to, well, align our images.

Code:

<html>
    <head>
        <title>My Title</title>
    <head/>
    <body>
       <table [COLOR=Red]width="300" border="1" [/COLOR]>
            <tr>
                <td [COLOR=Red]align="left"[/COLOR]>
                    <img src="image1.jpg" height="100" width="100"/>
                </td>
                <td [COLOR=Red]align="right"[/COLOR]>
                    <img src="image2.jpg" height="100" width ="100" />
                </td>
            </tr> 
            <tr>
                <td colspan="2" [COLOR=Red]align="center"[/COLOR]>
                    <img src="image3.jpg" height="100" width="100"/>
                </td>
            </tr>
        </table>
    </body>
</html>

The other thing, is that in my example I give a width and height of 100 for the image which may differ from what your image size is! You can insert any height and width you want or none at all. If you don't put a height or width attribute whatever the default behavior of the browser is will take effect; usually the image is displayed in its default proportions. So it's best to put the height and width of your image to be sure. One final thing on image sizes...if you choose a size that is smaller than the image the image will be displayed smaller, but of course the image is whatever size it is... So if you display a 1024x768 image as 10x10 it will look 10x10 but it will seem to take forever to download to the user!

Once you get the hang of tables (and it is a good idea to learn some of the attributes for table and td, how to "nest" tables, and general presentation in tables), you will probably also want to look into Cascading Style Sheets (CSS) that allow you to set the properties of tables or even not use tables at all to do table like behavior!!! But they also are more complicated (and tables really give you a good feel for html and markup languages in general), so I'd master tables to start with and then check them out when you're ready!

Hope this helps!

ps2cho · May 11, 2005

you are amazing. excelent explanation, i couldnt have asked for anything more.
Thanks loads man, i wont trouble you anymore. That is plenty

Thanks again,
ps2cho,

ps2cho · May 11, 2005

actually im really sorry but i have one problem...Its not like making a gap between.
This is my code i got going:

<table width="300" border="1" >
<tr>
<td colspan="120" align="center">
<center>



<SCRIPT LANGUAGE="JavaScript"
SRC="http://share1.serverspy.net/cgi-bin/monitor.js?mid=88720">
</SCRIPT>

</td>

<td colspan="120" align="center">




<SCRIPT LANGUAGE="JavaScript"
SRC="http://share1.serverspy.net/cgi-bin/monitor.js?mid=67869">
</SCRIPT></center>


</td>
</tr>
</table>

And look at the page:

http://www.westsidenoobs.com/modules.php?name=Server

Is it possible to make it like...two seperate boxes and so they are not touching?

thanks, sorry

kayson · May 11, 2005

First of all, let me suggest changing the table width to "100%". This will make the table span the whole page, or in your specific case, that entire black box. This would actually put one pic all the way to the left and the other all the way to the right. You could also add "align='center'" to the <table> tag to center the table which I think would look nice. As for separating the two, you can use the attribute "cellspacing". The only problem with that is that it will separate all of the gaps between each cell border and the table border, so it might look a little off. I suggest making the width 100%, making two cells, and then putting one align left and one align right. Then turn off borders. So your code would be:

<table width="100%" border="0" >
<tr>
<td align="left">



<SCRIPT LANGUAGE="JavaScript"
SRC="http://share1.serverspy.net/cgi-bin/monitor.js?mid=88720">
</SCRIPT>

</td>

<td colspan="120" align="right">




<SCRIPT LANGUAGE="JavaScript"
SRC="http://share1.serverspy.net/cgi-bin/monitor.js?mid=67869">
</SCRIPT>


</td>
</tr>
</table>

Another note: I took out your <center/> tags. When you do <td align="left"> it aligns the contents of the cell, so the <center> tag isn't necessary. It's also bad practice to split tags like that through cells. You should do one set of tags for each cell: <td><center></center></td><td><center></center></td>
Just some extra constructive criticism for future endeavours.

If you have more questions, feel free to get ahold of me on aim.

Fugue · May 12, 2005

Hey Ps2cho,

I think I know what you're getting at, and this will have to go into another disclaimer (since there is other ways to do this). Definitely the perferred way to do that stuff is through CSS but continuing with tables...

I agree with Kayson I would put an align="center" in the <table> tag. As far as the width goes I would experiment a little with fixed widths ( 300, 200, etc) and percentage widths (100%, 95%, 90%, etc.) and then resize your browser and watch what happens. Find what you like for this situation and go with it!!!

Borders that aren't touching... the pure table way would be nesting a couple of tables within a main layout table. You'd have an outside table with no border that has one table row and two table cells. Within each table cell you'd have another table consisting of one row and once cell with your picture. This <table> you definitely want width="100%".

Here's what I did...

Code:

<table width="300" [COLOR=Red]border="0" align="center" cellpadding="5"[/COLOR]>
	<tr>
		<td align="left" [COLOR=Red]valign="top" width="33%"[/COLOR]>
[COLOR=Red]			<table width="100%" border="1">
				<tr>
					<td align="center">
						<!-- Server Monitor (The main monitor) | START ------------------------------->
						<!-- NOTE:
						This first segment of code is only for the server monitor itself.
						If you want to include the server usage graphs, then scroll down to
						the marked code.
						-->

						<SCRIPT LANGUAGE="JavaScript"
						SRC="http://share1.serverspy.net/cgi-bin/monitor.js?mid=88720">
						</SCRIPT>
						<!-- SERVERSPY GAME CODE END -->
					</td>
				</tr>
			</table>[/COLOR]
		</td>
		<td [COLOR=Red]width="33%"[/COLOR]>
			[COLOR=Red] [/COLOR]
		</td>
		<td align="right"  [COLOR=Red]valign="top" width="33%"[/COLOR]>
[COLOR=Red]			<table width="100%" border="1" >
				<tr>
					<td align="center">
						<!-- Server Monitor (The main monitor) | START ------------------------------->
						<!-- NOTE:
						This first segment of code is only for the server monitor itself.
						If you want to include the server usage graphs, then scroll down to
						the marked code.
						-->

						<SCRIPT LANGUAGE="JavaScript"
						SRC="http://share1.serverspy.net/cgi-bin/monitor.js?mid=67869">
						</SCRIPT>
						<!-- SERVERSPY GAME CODE END -->
					</td>
				</tr>
			</table>[/COLOR]
		</td>
	</tr>
</table>

Ok so as Kayson suggested there is now an align and cellpadding attributes in the outer layout table. Align will align the table horizontally in whatever space its in. Cellpadding provides space within table cells. Since the table cells of the layout table contain our other tables that will move them apart (and they'll still have the borders from the border attribute of there respective table tags). In the first table cell (and the third) I've added a valign attribute. This aligns the cell vertically. I noticed that the bottom grew as players joined, so I aligned the tops. Also added was a percentage width for the <td> of 33% so all of the widths of the layout cells will be equal (if there content were all equal).

I also added a table cell in the middle with a non-breaking space ( ). Since HTML ignores spaces, or "whitespace", this is an HTML entity that says put a space here. I did this for a wee bit more padding. There are also the nested tables but I think these are pretty straightforward.

Another "old" way to create spacing in tables was with the spacer.gif. What the spacer.gif is is simply a 1x1 blank gif (you can google it and find one). You would add them any place in the layout table you would want either vertical or horizontal spacing. Kind of like this...

Code:

<img src="img/spacer.gif" width="1" height="100" />

This would create 100 pixel vertical space.

I'm sure with this example of two nested tables you can see why developers went a different way. Imagine nesting a couple levels deep! You start to get big time bloat (the pages would load slower). Not to mention if you forgot a closing </td> somewhere You could spend a whole afternoon trying to figure out why the heck the table is doing some funky thing... with CSS you can also create borders and position the html elements. This is nice semantically (you are separating your content from presentation) as well as functionally (it can look really nice, easy to make site wide changes, have different effects for printing versus screen, etc). So some day check that when you are bored with tables!

Anyway, I'm glad I could help you!

Quick HTML Question

ps2cho

Member

Fugue

Registered

ps2cho

Member

ps2cho

Member

Fugue

Registered

ps2cho

Member

ps2cho

Member

kayson

Member

Fugue

Registered

Similar threads