|
HTML - Table Help Needed Please
Hi guys,
I'm making a newsletter template while volunteering for a charity. I'm very much not an expert in html and I'm really stumped as to how I've gotten the code for laying out cells in such a mess. I managed to make a template with a less complex layout but then modified it and this happened: I've highlighted the areas with a red ring where there is grey and there shouldn't be. It was perfectly fine when the newsletter sections were two per row but when I modified the code so that the first section took an entire row it went downhill Where the grey is there aren't actually cells and when I try to put ones in in the correct place, they turn up somewhere unexpected and wreck the whole layout. Can someone please help me? I have uploaded my work he [now deleted] Thank you for any help you can give! Similar TutorialsI have the code, as shown in the right side bar at: http://www.actnowseminars.com/ What I need is to create some space below each graphic and also a little space to the right of each graphic. The code I'm using is: HTML Code: <table align="center"> <tr> <td colspan="2"> <a href='http://www.coachinggurus.net/leadershipgurus30.php' target="_blank"> <img src='http://leadershipgurus.net/images/lg-dua.jpg' title='Award of Excellence' border='0'/> <br />Top 30 Coaching Gurus 2011</a> </td> </tr> <tr> <td> <a href="http://www.riabiz.com/a/7638682" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/RIABiz93X26.jpg" width="93" height="26" alt="Featured in Ria Biz Logo" /></a> </td> <td> <a href="http://www.entrepreneur.com/article/219477" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/entrepreneur92x20.jpg" width="92" height="20" alt="Featured in Entreprenur Magazine" /></a> </td> </tr> <tr> <td> <a href="http://www.bottomline.com" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/bottomline96X26.jpg" width="96" height="26" alt="Featured in Bottom Line Personal" /></a> </td> <td> <a href="http://www.financial-planning.com/channels/practice_management.html" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/advisor98X23.jpg" width="98" height="23" alt="Advisor Max" /></a> </td> </tr> <tr> <td> <a href="http://www.nyreport.com/index.cfm?fuseaction=Feature.showFeature&FeatureID=813" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/NYReportSm98X25.jpg" width="98" height="25" alt="Featured in the New York NY Enterprise Report" /></a> </td> <td> <a href="http://money.cnn.com/magazines/moneymag/moneymag_archive/2006/07/01/8380777/index.htm" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/Money92X28.jpg" width="92" height="28" alt="Quoted in Money Magazine" /></a> </tr> <tr> <td> <a href="http://www.marke****ch.com/story/given-the-current-financial-turmoil-nows-the-time-to-pitch-in?dist=news%2CprintMidSection&print=true" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/marke****chlogo98X30.jpg" width="98" height="30" alt="Featured in Market Watch" /></a> </td> <td><a href="http://www.thestreet.com/s/get-ya-noo-yawk-ice-cream-here/newsanalysis/sbmanagement/10395543.html?" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/theStreetmed100X18.jpg" width="100" height="18" alt="Quoted in TheStreet" /></a> </td> </tr> <tr> <td> <a href="http://www.marketingsherpa.com/article-by-person.html?person=Maria+Marsala" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/marketingsherpa97X23.jpg" width="97" height="23" alt="Marketing Sherpa" /></a> </td> <td> <a href="http://www.electronicretailermag.com" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/electronicretailer99X30.jpg" width="99" height="30" alt="Electronic Eretailer" /></a> </td> </tr> <tr> <td><a href="http://nawbo.org/content_9338.cfm" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/nawbo99X31.jpg" width="99" height="31" alt="National Association of Women Business Owners" /></a> </td> <td> <a href="http://www.marketingprofs.com/9/email-tactics-that-can-put-you-out-of-business-moran.asp" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/marketingprofs98X23.jpg" width="98" height="23" alt="Marketing Profs" /></a> </td> </tr> <tr> <td> <a href="http://eblasts.workingmothermediainc.com/newsletter/NAFE_enews/enews142.htm" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/Nafe_Logo75x75.jpg" width="75" height="75" alt="Featured in National Assocation for Female Executives Newsletter NAFE" /></a> </td> <td><a href="http://www.chiroeco.com/chiropractic/news/9100/1217/Build-a-better-practice/" target="_blank"> <img src="http://www.elevatingyourbusiness.com/images/asseenin/chiroeconomics97X33.jpg" width="97" height="31" alt="ChiroEconomics" /></a> </td> </tr> </table> Thanks in advance... am having problems with a table i need to add a text box of size 3 max length of 3 right next to the Phone number box. but when i added as a new <td> it moves the whole table and it gets broken. you can see it in this link what's the table like http://www.heartofgoldprogram.com/charities/index3.php i need to add the text box right next to the phone number with a little space in between... its actually to add the box for a Extension... so you will have the phone number digits and in case you have an extension in your number you will put it in this box that i am trying to figure out how to do it. if anyone can help me it will be great... the code where that box need's to be is this one <tr> <td valign="middle" height="44"><b>Phone: *</b><br /> <input type="text" name="phone1" id="phone1" value="" size="3" maxlength="3" style="margin-bottom:10px; float:left; border-left:none; padding-left:4px; margin-right:0px;" onKeyUp="autoTab(this,'phone2'); buildPhoneNumber();"/> <input type="text" name="phone2" id="phone2" value="" size="3" maxlength="3" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTab(this,'phone3'); autoTabBack(this,'phone1'); buildPhoneNumber();"/> <input type="text" name="phone3" id="phone3" value="" size="4" maxlength="4" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTabBack(this,'phone2'); buildPhoneNumber();"/> <input type="hidden" name="phone" id = "fullPhoneNumber" value="" size="27" /> <td valign="middle" height="40"> </td> <td colspan="1" height="40"> <input name="submit" type="image" src="images/joinbutton2.jpg" alt="joinus" align="right" border="0" style="margin-right:1px; margin-bottom:6px" /> <td width="11" height="39" valign="middle"> </td> </tr> thanks Federico Hi, is there a way to have a table with "0" height. I need a table on my webpage to make the search engines skip the menu column beneath and go straight to the middle column (1, 2, 3, 4) as in: http://www.seoelite.com/Lessons/HTML_SEOLesson2_b.jpg This is my test site: http://www.monkeygambling.com/new%20...indexnew.shtml I have put the table in just above "casino Bonus" and left the borders on so it is visible (something has happened to the borders of the left hand column and if anyone could tell me how to fix that it would be great). As you can see the table I inserted pushes the menu underneath down a bit. Basically I want to know if I can make it go back level with the top? thanks Hi all, I love the design of this forum. I have a very annoying HTML problem and really need help. Would REALLY appreciate it. On some of the pages there's too much space between the table cells. I've tried EVERYTHING and couldn't find the source of the problem. Take it as a challenge and please help... Try this: http://www.canaseed.com/Search.aspx?search=csdc I've attached a gif file that describes the problem. Thank you so much for your help... Hi. I am new to this forum, and new to html/website development, etc. I am trying to get help on how to fix a problem with my website. I run a website for a small non-profit dog and cat rescue. The site was set up by a friend who understands this stuff, and I basically copy and paste coded? templates where I fill in information about the animals, etc. I am trying to fix a problem with embeded youtube videos, but honestly don't really know what the problem is. The website is www.flarescue.org if that helps. On the site, we have embeded youtube videos, along with pictures of each animals. The videos work fine, and the picture thumbnails look fine as well. The problem occurs when you click on the pictures to enlarge them. For some reason, the youtube videos stay in the foreground, and block the pictures. This problem only happens when viewing the website on IE or Chrome. Everything looks fine when viewing on firefox or safari. Any ideas as to what the problem is, or if this forum is where I should be looking for answers? And if so, where should I post my question? Thanks. Dylan Hi - I'm not a developer and need some help with this... I have a basic html page with images and text and I need to add the functionality of when a user clicks a defined button, the whole page flashes white 5 or 6 times - Almost like someone taking a photo and the flash goes off 5 or 6 times - Is this possible and what script would I need to include on the page to make this happen when the user clicks a certain button. Hope I've explained it ok, any help would be much appreciated - Thanks.. Help needed! I've been given a website and some code from the website. I need to create a website like this one: http://carapprovalnow.com/ I have the code from this site, but need help filling in the blanks!! Any help would be appreciated!! Thanks!!! Ok I have some files (500) or so that I need to edit and and replace some parts of the code. Is there a program out there that would edit out certain code and delete it on multiple pages with out going through each page individually. Thanks. I want to write some HTML to display some details on a CV the same as the images I've attached. The code I've written doesn't produce this exactly for me. Can anyone suggest how to remedy it? Code: <table border=0> <tr> <td><b>Name</b></td> <td>John Smith</td> </tr> <tr> <td><b>Address</b></td> <td>5 Main Street<br>Ballinasloe<br>Co.Galway</td> </tr> <tr> <td><b>Date of Birth</b></td> <td>10-05-1985</td> </tr> <tr> <td><b>Telephone</b></td> <td>086 81828384</td> </tr> </table> Code: <h2><a name="work"><i>Work Experience</i></h2> <b>Dunnes Stores</b> <dd>My main Responsiblities inclued:</dd> <ul> <li>Packing</li> <li>Till work</li> <li>Mopping out toilets</li> </ul> Okay, you know those HTML pages on the side of your page on some websites? The frame thingys... I forget the name of it, but I would really like it if somebody could write me a little script to make one. Thanks. Frameset is what I think their correct name is... Hello! I've no idea, how to margin a html page like the attachment.. Can anyone help me, please??? Our web designer has encountered a problem while designing our website www.buzzprinting.co.uk. The problem seems to be when you scroll down the page you are greeted with a mass of blue background. Does anyone know how this problem can be seolved? Many thanks in advanced. Steve Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this? Here's what I'm dealing with, visually: Any help would be welcome. Thanks. I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center? Here is an example of a part of my code: Code: <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
<tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>
<tr>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table> </td>
<td valign="top" width="33%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
</table>
</td>
</tr>
</table>
1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right. 2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column. 3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column. My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line. I tried: style="margin-left:20px" and style="padding-left:20px" but when the title got too long it would not auto-collapse the left side, I want it to collapse! I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column. If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it. My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want. This code is a list of books that spans about 20 categories and about 400 book titles. Thanks in advance for any help you might offer. The table itself is working fine, but the size of each cell is not correct in Firefox. Here is a screenshot of what is happening: http://img35.imageshack.us/img35/1938/tabletroubles.gif Here is the head of my page, the css for the table is he HTML Code:
<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center}
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;}
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;}
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;}
</style>
and here is the table code, located in the body of the page: HTML Code: <div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0"> <TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td> <div id="cat"> <table width=900; cellpadding:0px; cellspacing:0px> <tr align=center> <td width=20%> <font face=tahoma><a href="home.html">Home</a></font> </td> <td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> <td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> <td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> <td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> </tr> <tr> <td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> <td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> <td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td> <td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td> <td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> </tr> </table> </div> </td></tr></table> </div> A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else. If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks! This is NOT a professional website - it's just a crappy blogging portfolio project I have to do at Uni so please ignore the awful photoshopping. Basically I want to know if it's possible to add an iFrame on an image? I have dreamweaver CS5 and cannot for the life of me work out how to do it. My website is: www.chloieonline.com. Basically, if I use the image as a background, I can't work out how to align the frame PLUS it's quite a large background dimension wise. If I insert the image, I then cannot work out how to add the iframe on top on the image?! If anyone can help I'd be so grateful!! Hi I just developed a my site called www.365telecom.com in a "Firefox browser" but when I open it up in Internet Explore I get a Stack Overflow at line: 0 Error What do I have to do to make the site run smooth in both browsers????? This is my blog : www.moneyplanters.com hosted on Blogger platform I need to integrate Yahoo Finance charts (as on http://livecharts.50webs.com/charts.html) and a Gann calculator (as on http://www.gannsquareof9.stockmaniacs.net/ OR http://www.pivottrading.net/pivot/pivot/gann.html) The codes will be easily available to the prgrammers from these respective websites. However, their only job will be to modify it to some extent, as i would like to change the content and add/delete a few features as mentioned below : Gann Calculator : The grid should not be visible. The code should carry out the calculations at the backend and only the results are to be displayed to the user. Background colours, fonts etc will be changed later. This part of the page should not refresh automatically. Yahoo Charts : User should get a dropdown menu to choose his market. Based on his choice, the next dropdown in which he chooses the scrip gets activated. Scrips for markets other than the user's choice are not displayed. Background colours, fonts and position of objects will be changed later. This part of the page should auto - refresh every one minute. Chart size and auto refresh choices to be removed and shall be fixed after consulting the programmer. Others : 1. All code must be "blogger" friendly and shall be hosted on Blogger platform. 2. Scope of adding text should be there, which shall be added from the blog editor. 3. Scope to add modify Adsense ads within the post (which will include the charts and the calculator) should be made available. Can anyone code this for me ?? |
|||||||