|
HTML - Basic Question About Table
hi,
I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30">
<tbody>
<tr>
<td>
<p><b><a class="button" href="l1.html"
target="_blank">Link1</a></b></p>
</td>
<td>
<p><b><a class="button" href="l2.html"
target="_blank">Link2</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l3.html" target="_blank">Link 3</a></b></p>
</td>
<td>
<p><b><a class="button"
href="l4.html" target="_blank">Link 4</a></b></p>
</td>
</tr>
</tbody>
</table>
1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks Similar TutorialsI normally work in Flash which is much more intuitive for me. I am making and effort to design more in HTML. Here is the most basic of questions.. When doing designs in Photoshop or Illustrator, what is the best way to save slices. Gif or Jpeg. Are there tutorials or personal comment on the forum about the best practice for slicing sites. Thanks! edit: Problem solved, how do I delete this thread? Hi guys, I am trying to help my friend figure out what is going on with his (VERY BASIC) website. I believe that he created it using dreamweaver originally, and then tampered with the code a little. The problem is as follows: The website seems to display perfectly as intended on mac ( safari) however when viewed on PC wit internet explorer the frames do not not work properly, They are opening in different windows etc. I know that no-on ould ever recommend building a site like this with frames, but would recommend iframes etc, however i ws wondering if there is a flaw in the code that can be fixed to resolve his problem simply? Thanks for even taking the time to read this, any helpful advice would be most appreciated! the code is as follows: The code titled "main" the main piece of code, then the coodes titled "top", "middle" and "bottom" are the codes for the respective frames. MAIN: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> </head> <frameset rows="67,*,74" framespacing="0" frameborder="no" border="0"> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="topframe.html" name="topFrame" scrolling="No" noresize="noresize" name="topFrame" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="midframe.html" name="mainFrame" name="mainFrame" title=""mainFrame" target="_self" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="bottomframe.html" name="bottomFrame" scrolling="No" noresize="noresize" name="bottomFrame" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> TOP: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #A890AE;
background-image: url(Images/maze%20strip%20top.jpg);
}
.style1 {font-size: 8px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'Images/image-g.gif'); MM_preloadImages('Images/discography-black.gif','Images/images-black.gif','Images/text-black.gif','Images/download-black 45pt.gif','Images/download-g.gif','Images/download-b.gif','Images/image-g.gif','Images/text-g.gif')">
<div align="center"><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="download.html" target="mainFrame" onmouseover="MM_swapImage('download','','Images/download-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/download-b.gif" name="download" width="205" height="10" border="0" id="download" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="images.html" target="mainFrame"><img src="Images/image-b.gif" name="images" width="124" height="10" border="0" id="images" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'images',/*url*/'Images/image-g.gif')" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="text.html" target="mainFrame" onmouseover="MM_swapImage('text','','Images/text-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/text-b.gif" name="text" width="104" height="10" border="0" id="text" /></a><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="midframe.html" target="mainFrame"></a></div>
</body>
</html>
MIDDLE: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-image: url();
}
.style1 {
border-width: 0px;
}
-->
</style>
<base target="_self" />
</head>
<body>
<div align="center">
<p> </p>
<p><a target="mainFrame" href="download.html">
<img alt="" src="Images/doomsayercoverthumb.jpg" width="319" height="319" class="style1" /></a></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
BOTTOM: -------------------------------------------------------------------------------------------------------- HTML Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>untitled</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(Images/maze%20strip%20bottom.jpg);
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 13px;
font-weight: bold;
}
.style2 {font-size: 10px}
.style4 {font-size: 12px}
-->
</style></head>
<body>
<div align="center" class="style1">
<p class="style2"> </p>
<span class="style4">last updated 08/12/2011</span></div>
</body>
</html>
I want to create a two column table that, in one of the rows, has a large picture in the second column. I wanted to "wrap" the picture in a <div> and give the div scroll bars so the user can scroll horizontally and vertically to see the entire picture, but still keep the width of the table as the same size as the width of the browser window. The div part seems to work fine. The large picture appears in the smaller div and the div has the scroll bars that I want. But, the table is still sized to contain the ENTIRE width of the photo, so the other rows in the table go off the edge of the browser window (because the image is wider than the browser window). Is there a way that I can limit the table width to only be the width of the browser, and have a large photo contained in a scrolling div, within one of the table rows. I will include some basic HTML code to demonstrate the problem. Just insert a path to some large image you might have, for testing, into the image tag's src property. (the image I am using is 1600x1200) Thanks, in advance, for any help you can provide. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test a Large Image in a Table</title> </head> <body> <table style="border-bottom-width:thin"> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #1 </td> <td style="width:80%; background-color:red""> Why does this row go past the edge of the page? </td> </tr> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #2 </td> <td style="width:80%"> <div style="overflow:auto; max-width:60em; min-width:15em;"> <img src="" alt="some large image" /> </div> </td> </tr> </table> </body> </html> I am in the process of writing a spell-checker in PHP, but repeatedly stumble due to my less than perfect knowledge of HTML basics. (1) What's the most straightforward way to open a second page on top of the currently active one? Is it via JavaScript, or can it be done using HTML itself? (2) If I need to update a text area on the original page at the time I close the overlying one, is this again best done by JavaScript? My aim in both of the above is to avoid adding any code to the underlying page, other than the addition of a "SpellCheck" button and the coding associated with that. Many thanks for any pointers. Hi, In microsoft word you can make the text go all the way across the page so that the beginning of each line and end of each line are inline with the one above and below, if you know what I mean. I can't remember what it is called. But it basically adds small amounts of space between each letter so it goes all the way across. How is this done in HTML/CSS if it can be done? Thank you as always, Ash Hi! This is my first post here. I am a part time web designer, (I must admit, better with the graphics than the coding). I am designing a page and I want the background to be black for say 1000 pixels down, and then white after that. How do I accomplish this? Does anyone know an easy way to create backgrounds with several tones? Thanks... Cosmos Hi, I am creating a one page site that uses an iframe to display the other pages. So I create an index.html with an iframe in it and drawing an initial 'page': <iframe src="pages/welcome.php" name="carter-fairfax" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="900px" height="910px"></iframe> I then create another 'page' on the site and link to it using the following: <li><a href="pages/who-we-are.php" target="carter-fairfax" frameborder="0" scrolling="no" width="900px" height="500px">who we are</a></li> Everything displays fine except that there is a good deal of white space at the bottom, obviously because there is a difference in the height of the iframe - is there an elegant way to get round this problem. I do have the containing div height set to auto. Many thanks, Keith Hulse Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional. 1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600? Hi all im really new to html. I guess this question is really basic to the expert html ers but just need a bit of help. I want to add some text say i got a <p> tag and want to write just a sentance such as .. <p>I am learning html, it uses tags like this <a,b> which can load images etc. </p> of course a,b isnt a tag, but if i load this basic text in a web browser it would ignore the <a,b> and come up as validation error in the validator. So pretty much is there a way around of displaying <any letters or words> without the browser thinking its some sort of tag? thanks for the help! Can someone please help me? How do I move the entire image up on following index page: www.AndyG.com Note that there is a one inch gap between top of computer screen and top of image...I just want to move image way up to top... Thanks a lot! Andy Okay, it was all working great until I wanted to add another column to make the center logo clickable. Now I am having the problems with the little images being slightly out of alignment again. Any help would be greatly appreciated! The web address is: http://radarcartoons.com/test/test.html Here is the source code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Radar Cartoons </title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
body { background: #000000; text-align: center; }
#wrapper { width: 1101px; margin: 0 auto; }</style>
</head>
<body><br />
<br />
<div id="wrapper">
<table cellspacing="0">
<tbody>
<tr>
<td><img src="1.jpg" alt="1" /></td>
<td><br />
</td>
<td><a href="/shows.html" onmouseover="document.circle1.src='2_lit.jpg'" onmouseout="document.circle1.src='2.jpg'"><img src="2.jpg" alt="Shows Page" name="circle1" height="161" width="145" /></a></td>
<td><img src="3.jpg" alt="3" /></td></tr></tbody></table>
<table cellspacing="0">
<tbody>
<tr>
<td><img src="4.jpg" alt="4" /></td>
<td><br />
</td>
<td><a href="/news.html" onmouseover="document.circle2.src='5_lit.jpg'" onmouseout="document.circle2.src='5.jpg'"><img src="5.jpg" alt="News Page" name="circle2" height="151" width="140" /></a></td>
<td><img src="6.jpg" alt="6" /></td></tr></tbody></table>
<table cellspacing="0">
<tbody>
<tr>
<td><img src="7_1.jpg" alt="7_1" /></td>
<td><a href="/info.html"><img src="7_2.jpg" alt="7_2" /></a></td>
<td><a href="/credits.html" onmouseover="document.circle3.src='8_lit.jpg'" onmouseout="document.circle3.src='8.jpg'"><img src="8.jpg" alt="Credits Page" name="circle3" height="148" width="148" /></a></td>
<td><img src="9.jpg" alt="9" /></td></tr></tbody></table>
<table cellspacing="0">
<tbody>
<tr>
<td><img src="10.jpg" alt="10" /></td>
<td><br />
</td>
<td><a href="/links.html" onmouseover="document.circle4.src='11_lit.jpg'" onmouseout="document.circle4.src='11.jpg'"><img src="11.jpg" alt="Links Page" name="circle4" height="137" width="137" /></a></td>
<td><img src="12.jpg" alt="12" /></td></tr></tbody></table>
<table cellspacing="0">
<tbody>
<tr>
<td><img src="13.jpg" alt="13" /></td>
<td><br />
</td>
<td><a href="/contact.html" onmouseover="document.circle5.src='14_lit.jpg'" onmouseout="document.circle5.src='14.jpg'"><img src="14.jpg" alt="Contact Page" name="circle5" height="133" width="126" /></a></td>
<td><img src="15.jpg" alt="15" /></td></tr></tbody></table></div>
</body>
</html>
I know these are pretty easy questions, but I don't know that much about html and I couldn't seam to find the answer on w3 or anywhere else. NOTE: This it mainly for html, but if you have a solution in javascript or css, that would be fine. 1. How do you place a table (single celled) at a set distance from the left side and top of the page? 2. How do place a box (with a set color, thickness etc.) anywhere on the page (the same way as the table)? I know I could use the table thickness, but I like it set to "0" because I don't like its border look. Help please, thanks. Hi everyone, I am having a basic problem with a header for my site. The header template is a 3 column 4 row table, with various graphic pieces plugged into each cell. On the second row, I have a graphic that is as wide as the 2nd column plus the 3rd column, and I used the colspan command so it should take up both columns. But, there is a goofy gap to the left of it! Can anyone help? The website is www.precisionpythons.com Thank you! JonV I am trying to create a table that looks like the following: _____________ |_______|____| |___________ | |___|________| Here is the code I am using: HTML Code: #mainTable {
width: 100%;
padding: 0;
margin: 0;
}
#headerLeft {
padding: 10px 0 10px 10px;
width: 606px;
}
#headerRight {
margin-top: 25px;
text-align: right;
white-space: nowrap;
}
.orangeBar {
margin: 0;
padding: 0;
font-size: 8px;
background-color: #FFC342;
}
#navCell {
width: 225px;
vertical-align: top;
}
#contentCell {
width: auto;
vertical-align: top;
}
<table id="mainTable" border="1">
<tr>
<td id="headerLeft" colspan="2"><img src="images/logo.gif" width="596" height="60" alt="Our Logo" /></td>
<td id="headerRight">Nav Links</td>
</tr>
<tr>
<td colspan="3"><p class="orangeBar"> </p></td>
</tr>
<tr>
<td id="navCell">Nav</td>
<td colspan="2" id="contentCell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a sem. Integer mattis justo eu nunc.</p>
</td>
</tr>
</table>
For some reason, the Nav cell in the last row is taking on the width of the image in the first cell, even though I want it to be 225px wide. I want the table to be the width of the page (100%). Anyone have any ideas? I know it can be done by nesting two tables, I was just trying to avoid that. Thanks! Just a quick edit, I added a bg color to headerLeft. Then I tested my code with the image removed, and the layout works they way I want, but as soon as I put it back, it is messed up again! The bg color I added confirms that the cell is the same size with and without the image. I have a table and after I select the question (the ball) I would like the answer to come up in another column in that table. Is that too much? Keep'er simple please. Thanks. I'm in the process of coding a webpage and I haven't done this in almost 7 years.... Here is my unfinished webpage...... http://webtvdeluxe.com/home.php What I am trying to figure out is how to move everything up so that the banner is touching the top. I don't want that space between the top of the window and the banner. I want to close that gap pretty much. I thought it was as simple as doing a Quote: valign="top" in the td part of the table, but that doesn't seem to work and I can't figure out what I am doing wrong. If one of you can look at my source code and give me a soltuion to my problem.... that would be great. Thanks in advance. i have the following code and all I want to do is fix it so that the text within the border is centered and I know it has to do with the red text. I simple want the border to stay at the 60% width but when I do that it aligns the text flush left and I want it to stay in the center as specified by <table align = "center;"..... <html> <body> <p style = "text-align: center;"> <img src = "entre.gif"/> <hr style = "color: green; height:3;width 50%"/> <table align="center" width = 60%; style="border:1px solid black;"> <tr> <td> <p><b>Chicken Parmigiana</b>.........................<span style = "color:red"> $12.75</span></p> <p><b>Chicken Francese</b>.......................<span style = "color:red"> $12.75</span></p> <p><b>Chicken Cacciatore with Mushrooms</b>.............<span style = "color:red"> $12.75</span></p> <p><b>Chicken Marsala with Mushrooms</b>..............<span style = "color:red"> $13.75</span></p> <p><b>Chicken Milanese</b><i>(sauce,no Cheese)</i>...............<span style = "color:red"> $12.00</span></p> <p><b>Eggplant Parmigiana</b>...................<span style = "color:red"> $10.75</span></p> <p><b>Eggplant Rollatini</b>..........................<span style = "color:red"> $11.75</span></p> <p><b>Suasage & Peppers</b>.......................<span style = "color:red"> $12.00</span></p> <p><b>Veal Milanese</b><i>(Sauce, no Cheese)</i>...................<span style = "color:red"> $12.50</span></p> <p><b>Veal Parmigiana</b>......................<span style = "color:red"> $13.25</span></p> <p><b>Veal Parmigiana ala Siciliana</b><i> (with Eggplant)</i>........<span style = "color:red"> $14.00</span></p> <p><b>Veal & Peppers</b>......................<span style = "color:red"> $12.75</span></p> <p><b>Veal Cacciatore with Mushrooms</b>................<span style = "color:red"> $13.50</span></p> <p><b>Veal Pizzaiola with Mushrooms</b>..................<span style = "color:red"> $14.25</span></p> <p><b>Veal Marsala with Mushrooms</b>..................<span style = "color:red"> $14.25</span></p> <p><b>Veal Sorrentina</b>...................<span style = "color:red"> $14.75</span></p> <p><b>Veal Francese</b>....................<span style = "color:red"> $13.75</span></p> <p><b>Chicken Sorrentina</b>....................<span style = "color:red"> $13.75</span></p> <p><b>Shrimp Marinara or Fra Diavolo</b>.............<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Scampi</b>..................<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Parmigiana</b>..............<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Oreganata</b>..............<span style = "color:red"> $14.50</span></p> <p><b>Shrimp Francese</b>................<span style = "color:red"> $14.50</span></p> <p><b>Scungili Marinara or Fra Diavolo</b>..............<span style = "color:red"> $14.50</span></p> <p><b>Calamari Marinara or Fra Diavolo</b>..............<span style = "color:red"> $13.75</span></p> <p><b>Clams Posillipo</b>....................<span style = "color:red"> $13.75</span></p> <p><b>Scungilli Salad</b>..................<span style = "color:red"> $14.25</span></p> <p><b>Fried Calamari</b>...................<span style = "color:red"> $14.25</span></p> <p style = "text-align: center;"> <br/><i>All of the above served with your choice of Spaghetti <br/>Ziti or Salad and Italian Bread</i></p> </td> </tr> </table> how to make a table which they will auto go to next line after 3 table inserted i want to make a php script which use " foreach glob " to find valid file in the directory and display as table. for example : if the directory contain 7 file, the table should be display as [] [] [] [] [] [] [] not display as [] [] [] [] [] [] [] or [] [] [] [] [] [] [] Does anybody know how to do that It is very basic but some how I don't get it. in my table tag I have <table width="100%" border="1" cellspacing="0" cellpadding="0"> but I don't like the border showing up like the way it is. I want it to be flat regular black line, and then I want to partition this table in the middle so that the Table of Contents returned by my sql query shows up in equally on both sides... in a table 1. INTRODUCTION 3. BASIC ALGEBRA 2. SIMPLE ALGEBRA 4. ADVANCED ALGEBRA Right now I have the following code: Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<cfoutput query="qry">
<tr>
<td >#numbering#. #Table_Of_Contents#</td>
</tr>
<cfset numbering = numbering + 1 />
</cfoutput>
</table>
ANy help is appreciated.. |
|||||||