|
HTML - How To Build A Table With Images?
Hello I am trying to figure out the best way to make a table that shows a product then under the product has a small description, link to get details and then an add to cart link/image.
an example of what I ma trying to do is the table they have built here; http://www.cabothillsmaple.com/order_syrup.htm What is the best way to do this? Thanks for your help Similar TutorialsThis form uses a wordpress plugin so it works fine but it just looks bad because it doesn't fit into the theme nicely. Can anyone tell me how to make it fit? Code: http://reveretaxi.com/order-a-taxi-cab What value do i adjust in the HTML to get it to fit? Code: <div align="center">
<center>
<pre>
<table width="69%" height="690" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td width="50%" height="25" bgcolor="#ff0000" align="right"> </td>
<td width="50%" height="25" bgcolor="#ff0000"> </td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font><font color="#000000">Leaving
From</font></b></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* LeavingFrom]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Cross-Street:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* Cross-Street:]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Location
Type:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[select* LocationType: "Choose One" "House" "Business" "Apartment" "Other"]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>City:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* LeavingFromCity]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>State:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* LeavingFromState]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Date:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* Date]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Time:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[select* Hour "Hour" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]<!--webbot bot="Validation" b-value-required="TRUE" -->[select* Minute "05" "10" "15" "20" "25" "30" "35" "40" "45" "50" "55" "00"]<!--webbot bot="Validation" b-value-required="TRUE" -->[select* AMorPM "AM" "PM"]</td>
</tr>
<tr>
<td width="50%" height="21" bgcolor="#ff0000"> </td>
<td width="50%" height="21" bgcolor="#ff0000"> </td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font><font color="#000000">Destination:</font></b></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* Destination]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>City:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* DestinationCity]</td>
</tr>
<tr>
<td width="50%" height="26" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>State:</b></font></td>
<td width="50%" height="26">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* DestinationState]</td>
</tr>
<tr>
<td width="50%" height="21" bgcolor="#ff0000" align="right"> </td>
<td width="50%" height="21" bgcolor="#ff0000"> </td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Vehicle
Type Preference:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[select* VehicleTypePreference "Taxi - 4 Door preferred" "Taxi - Van preferred"]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Payment
Type:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[select* PaymentType "Choose One" "Cash" "Visa" "Master Card" "American Express" "Voucher"]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><font color="#000000"><b>Number
of Passengers:</b></font></td>
<td width="50%" height="25">[select NumberofPassengers "1" "2" "3" "4" "5" "6" "7" "8" "9" "10"]</td>
</tr>
<tr>
<td width="50%" height="21" bgcolor="#ff0000" align="right"></td>
<td width="50%" height="21" bgcolor="#ff0000"></td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Contact
Name:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* ContactName]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Contact
Phone Number<br>
(w/ Area Code):</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* ContactPhoneNumber]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><b><font size="5" color="#000000">*</font></b><font color="#000000"><b>Contact
Email:</b></font></td>
<td width="50%" height="25">
<!--webbot bot="Validation" b-value-required="TRUE" -->[text* ContactEmail]</td>
</tr>
<tr>
<td width="50%" height="21" bgcolor="#ff0000" align="right"> </td>
<td width="50%" height="21" bgcolor="#ff0000"> </td>
</tr>
<tr>
<td height="59" align="right" colspan="2">
<p align="center"><b><font color="#000000">If
you require service to meet an arriving flight, please provide
the following:</font></b></p>
</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><font color="#000000"><b>Airline:</b></font></td>
<td width="50%" height="25">[text Airline]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><font color="#000000"><b>Flight
Number:</b></font></td>
<td width="50%" height="25">[text FlightNumber]</td>
</tr>
<tr>
<td width="50%" height="21" bgcolor="#ff0000" align="right"> </td>
<td width="50%" height="21" bgcolor="#ff0000"> </td>
</tr>
<tr>
<td height="40" align="right" colspan="2">
<p align="center"><b><font color="#000000">If
paying by voucher, please provide the following:</font></b></p>
</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><font color="#000000"><b>Voucher
Account Name:</b></font></td>
<td width="50%" height="25">[text VoucherAccountName]</td>
</tr>
<tr>
<td width="50%" height="25" align="right"><font color="#000000"><b>Voucher
Account Number:</b></font></td>
<td width="50%" height="25">[text VoucherAccountNumber]</td>
</tr>
<tr>
<td width="50%" height="25" bgcolor="#ff0000" align="right"> </td>
<td width="50%" height="25" bgcolor="#ff0000"> </td>
</tr>
</tbody></table>
</pre>
</center>
</div>
<p align="center"><font color="#000000"><b>Please provide any special
requests or instructions in the field provided below:<br>
[textarea specialrequestsorinstructions]
</b></font>
[submit]</p>
http://www.sedition-gaming.com/test/ As you can see at the top, the images themselves aren't cooperating. How do I put them in their place? Thanks in advance. Hi, I'm trying to make a table to hold the "news" section for my website, I want to have the table have smooth edges, and I was thinking of having a "side" "corner" etc. and run them in smaller tables aroudn the outline, and have them repeat if new content is added, when I tried this it ended up messy, any ideas? thanks! - much like http://www.ask.com/?&o=101881&l=dis&&qsrc=119 Hi everyone, I'm creating a fan site for South Park, and I'm attempting to create a kind of layout type thing. I'm not new to HTML, but I'm not too experienced with tables and layouts. So, anywho, there is a break in between my banner image and the table. I want it to look like the banner is part of the table, but I'm not succeeding. I REALLY need help. Could someone PLEEEEEEEAAAAAASE help me?!?!? URL: http://www.freewebs.com/patrickduffylegland/index.htm my site is REALLY rough right now. I just started. If anyone knows, I would like to make the light blue part in the table separate from the dark blue part. Like the light blue part would be a different table if anyone knows how to do that. It would just make it easier since the light blue part will be the menu. Heres my HTML code so far: <html> <head> <title>Patrick Duffy Leg Land - Keeping the World Safe From Crab People since 2007</title> </head> <body> &nbs p; <img src="http://www.freewebs.com/patrickduffylegland/top_banner.png"> <table align="center" width="780" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="72" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="5" background="http://www.freewebs.com/patrickduffylegland/table_bg.png"> <tr> <td class="espacio2"> <font color="#CCCCCC" face="verdana" size=1><br></font> </td> </tr> </table> </td> </tr> I'm setting up a table showcasing a bunch of logos and they're all different widths. I saved the Jpegs as all the same height. I need help coding it though I want the page to look like this but it looks like this when I use this code Quote: <table border="0"> <tbody> <tr> <td><a href="http://www.champssports.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/champs.png"/></a></td> <td><a href="http://www.ladyfootlocker.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/footlocker.png"></a></td> <td><a href="http://www.drjays.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/drjays.png"></a></td> </tr> <tr> <td><a href="http://www.shoecity.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/shoecity.png"></a></td> <td><a href="http://www.shiekhshoes.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/sheik.png"></a></td> <td><a href="http://www.finsihline.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/finishline.png"></a></td> <td><a href="http://www.jimmyjazz.com"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/02/jimmyjazz.png"></a></td> </tr> </tbody> </table> and I don't even know how I would code that green square image that says "thes are some of our retailers" it wouldn't go within that table right? Any help is appreciated! I have received so much help from the experts here that I am having a blast trying new things with HTML. But, now I've run into another little problem that I just can't figure out. So here I am again seeking the advice of the experts. I have a table and I am trying to get an image in it. I can get the image in, but because the particular cell that the image is in (as a background btw) is longer than the image, the image repeats itself below the image I want. Other than shortening the cell itself, is there a way to keep this background image from repeating itself within the cell of the table? Thanks, Vance This code is taken from here (select gallery). I have been asked to add extra images to the gallery and the idea is to have a more button and replicate the same page but with new images - but I can't get it to work. I've tried editing the original image names with the new ones I;ve created. The image on the right shows but not on the left. Also the images don't seem to have the border The code: <div style=" margin:16 0 0 22px; line-height:13px " class="w2"><img src="images/4_p1.jpg" alt="" border="0" align="left" style="margin-right:30px "><a href="gallery.html" target="cont"><img src="images/4_p2.jpg" alt="" border="0"></a><a href="gallery2.html" target="cont"><img src="images/4_p3.jpg" alt="" border="0" style="margin-left:19px "></a><br> <br style="line-height:19px "><a href="gallery3.html" target="cont"><img src="images/4_p4.jpg" alt="" border="0"></a><a href="gallery4.html" target="cont"><img src="images/4_p5.jpg" alt="" border="0" style="margin-left:19px "></a><br> <br style="line-height:19px "><a href="gallery5.html" target="cont"><img src="images/4_p6.jpg" alt="" border="0"></a><a href="gallery6.html" target="cont"><img src="images/4_p7.jpg" alt="" border="0" style="margin-left:19px "></a></div> <div style=" margin:15 0 0 167px; line-height:13px " class="w2"><strong>Dream Catcher Howdy all! I recently developed the website http://www.dailytask.co.uk. I cant seem to get IE to show my images (regardless of format) within the tables ive used to put together its basic layout. Work okay in Firefox, Chrome and the rest. Could someone take a peak at the code for me and give me a shout out about what i am doing wrong here ? Thanks! Adil I've tried and tried and can't figure this one out, probably VERY easy for others. I've got a table with images and I can't figure out how to remove the spacing betwen the table rows. Here is a link http://www.4wheelcustoms.com/new%20template/index.html Notice both sides of the navagation images have horizontal spacing around them. Any help is appreciated. none of the images are showing in my table. the are specified to the correct location. anyone have any ideas why this is? Code: <table border="1" cellspacing="5" cellpadding="5">
<tr>
<td width=100px, height=80px><img scr="images/apple schnapps.jpg" width="60px" height="80px"/> <br /> Apple Schnapps</td>
<td width=100px, height=80px><img scr="images/cachaca.jpg" width="60px" height="80px"/> <br /> Cachaca</td>
<td width=100px, height=80px><img scr="images/champagne.jpg" width="60px" height="80px"/> <br /> Champagne</td>
<td width=100px, height=80px><img scr="images/Coca Cola.jpg" width="60px" height="80px"/> <br /> Coca Cola</td>
<td width=100px, height=80px><img scr="images/cranberry juice.jpg" width="60px" height="80px"/> <br /> Cranberry Juice</td>
</tr
<tr>
<td width=100px, height=80px><img scr="images/espresso.jpg" width="60px" height="80px"/> <br /> Espresso</td>
<td width=100px, height=80px><img scr="images/grapefruit juice.jpg" width="60px" height="80px"/> <br /> Grapefruit Juice</td>
<td width=100px, height=80px><img scr="images/lime juice.jpg" width="60px" height="80px"/> <br /> Lime Juice</td>
<td width=100px, height=80px><img scr="images/passion fruit juice.jpg" width="60px" height="80px"/> <br /> Passion Fruit Juice</td>
<td width=100px, height=80px><img scr="images/peach juice.jpg" width="60px" height="80px"/> <br /> Peach Juice</td>
</tr>
<tr>
<td width=100px, height=80px><img scr="images/rum.jpg" width="60px" height="80px"/> <br /> Rum</td>
<td width=100px, height=80px><img scr="images/soda water.jpg" width="60px" height="80px"/> <br /> Soda Water</td>
<td width=100px, height=80px><img scr="images/sugar.jpg" width="60px" height="80px"/> <br /> Sugar</td>
<td width=100px, height=80px><img scr="images/Vodka.jpg" width="60px" height="80px"/> <br /> Vodka</td>
</tr>
</table>
I need a bit of help with some images within the cell of a table. In this cell I have a background image that I am hoping will adjust to fit the varying heights of my table on different pages (some pages have more info and are therefore taller - for lack of a better description). In this same cell, and on top of the background image, I have the navigational image and it all seems to work exactly the way I want it to, with one exception. The exception is that when I view the page, the navigational image is much to low in the cell. I have done a bit of reading and unless I am just flat out not looking in or for the right information, I can't find anything that looks like it could be a solution. You can see what I am trying to explain here. You can see just how low the navigational list is and I would like to have it moved more towards the top of the cell. I am pretty sure that I can move it up if I use a lt of " " but I don't think this would be the best way to go. I am sure there is a way to do this so if any of the experts here have a suggestion as to how to fix this or where to look for information about moving the images around in a cell I would greatly appreciate any help. Thanks, Vance Hi, I sliced my web layout in PS. So far so good, I've done about 4 or 5 pages and it's gone fairly smoothly. However I'm having trouble with some coding on a particular page. I want to have a contact form on my contact page. But it's an HTML table and so are the slices. I've tried a couple of different ways to see if I could get it to 'lay' on top of the background image slice, but no luck. Take a look for yourselves: http://www.beemerphotography.com/contact.html Code: <form name="contactform" method="post" action="contact.php"> <table width="450px"> </tr> <tr> <td valign="top"> <font color="#FFFFFF"><label for="name">Name</label></font> </td> <td valign="top"> <input type="text" name="name" maxlength="50" size="30"> </td> </tr> <tr> <td valign="top"> <font color="#FFFFFF"><label for="email">Email Address</label></font> </td> <td valign="top"> <input type="text" name="email" maxlength="80" size="30"> </td> </tr> <tr> <td valign="top"> <font color="#FFFFFF"><label for="telephone">Telephone Number</label></font> </td> <td valign="top"> <input type="text" name="telephone" maxlength="30" size="30"> </td> </tr> <tr> <td valign="top"> <font color="#FFFFFF"><label for="comments">Comments (Type of session(s): engagement, wedding, family, etc. | Booking date if applicable)</label></font> </td> And I've tried this: Code: <table background="http://www.beemerphotography.com/contact/images/info.gif" width="409" height="467"> And also, I have another page that is just not displaying for some reason. I have gone over the code, redone the slicing, redone the coding, and I can't figure it out for the life of me why it isn't displaying anything: http://www.beemerphotography.com/abo...ng/prints.html quick intro~ im an artist making a unique gallery. i did have someone else helping out n tried doing things in wordpress but that was getting to be too much trouble (especially after a promotion in their dayjob left me effectively alone with a site beyond my understanding). so i'm striking out to make it look as i want in plain ol' html first, and will tackle the database and backend stuff later. http://www.gaudiepod.org.uk/light/al.../test****.html ^ this example uses a few different techniques from my explorations of the possibilities. http://www.gaudiepod.org.uk/light/al...t****beta.html ^ this example is closer to what i am looking for (ignoring that it's all the same image for the moment). the images aren't merely cell-backgrounds, and so can be turned into clickable links without messy text (which was there just to give something that i could turn to links to lead to the fullscreen images), however all is not yet quite right.... ...when the window is large enough, the images in the grid show correctly, filling the screen. (hurrah!) but squish the window too small, and the cells refuse to shrink further than 100% the image's original size, and worse, the "fill table to 100% of window" breaks, and a scrollbar appears. i was wondering perhaps if i discovered the code to disable the scrollbar, that would force the table to remain constrained to the window's edge again. (would it?) but i'm guessing this cant be the whole solution, given the behavior of the table as is. what i'm going for, is a grid of 9 clickable images , that always scale to fit the window (or frame). (tho of course, the skills here will be scalable/transferable to tables any number of cells, not limited to just a 3x3 table of 9 cells) how can i make sure the table remains inside the window (no scrollbars!), and the images can scale down to smaller than original size? if i've messed up some other way (like left some link pointing to my local files or something), do please let me know. Hi, How can I stop the table bacground image in this page from scrolling: http://augustineleudar.110mb.com/music.htm Its the bacground image of a table not the whole page any help appreciated I have list of files in a folder which are to be displayed in html table. Each file should be shown as follows ------------ | image1| | | ------------ <image 1 file name> ------------ | image2| | | ------------ < image 2 file name> its image and name of the file below the image. I am new to this html and needs help! Thank you, Krishna. Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry! First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse. Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary. I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much, Kristen Hey, I need to make an squre which would be fully compatible with CSS1 only - I've it with CSS2 or 3, but appication which is using these html templates is not compatible with those css (border of div is not visible etc), so I have to to it by some "old" kind of way. Square should be like 18x18px with nothing inside - just thin black border (1px). Let me know if there is any way which won't be <table... Thanks in advance! i want to build a free website to start really learning html until i am a wizard at html Hi guys I want to build a simple HTML site on WordPress but I don't want to use the templates they offer there. I also want to add java script effects. Or is there a way to modify the design of big areas in case I do use a custom template? I want the site to look something like that with some codes for the images to move around like that: http://www.studiobreakfast.be/ Is there a free way to do that of I need to pay? Thanks a lot for your help! Natalie Hello, I want to build button for menu on a site. Each button is made from 'div'. When button is in release state (not pressed), the border-style of its div must be "outset". When button is in actioned state (pressed), the border-style of its div must be "inset". The code for release state may be: -------------------------- <a href="index.html"> <div id="menuHome" style="position:absolute; left:0px;top:0px;width:150px;height:20px; background-color:#FF6600; border-styleutset; border-color: #FF6600; border-width:3px;" align="center">Home </div> </a> -------------------------- The 'menuHome' is the button for home link and I make the link to this div and so on. My problem is to set the 'inset' property for border-style of 'menuHome' div when I click on this button to give effect of pressed button. Thank you. |
|||||||