HTML - Setting Table Row To Display In Viewport ?
Hi:
I have a 600-row table which to now is presented to the user with always the first row displaying. Problem: How do I specify that I want a different and specific row of the table to be displayed at the top of the viewport ? Thank you, -Mel Smith Similar TutorialsI'm a beginner at html, this class is online and my teacher doesn't really keep in touch....So any help what so ever would be greatly appreciated, just a direction to go in...I'm lost. This is supposed to be a sudoku puzzle, doesn't work, but just displays a puzzle. The book kinda confused me when it asked for sub tables. Mainly, I'm just not sure how I need to layout the nested tables. I included the code for the table and a pic of what it's supposed to look like. (I inserted the "5's" just to help me try to see what I was doing) Here's the instructions: http://books.google.com/books?id=4-BlHT9Xb1oC&pg=PA334&lpg=PA334&dq=the+japanese+puzzle+factory+html&source=bl&ots=yCVllJjfgL&sig=pPsbW dc01C5rjY6vAgTIBLzg3P0&hl=en&ei=Fo34S7bONoH48Aah-9X9Cg&sa=X&oi=book_result&ct=result&resnum=5&ved=0CCAQ6AEwBA#v=onepage&q&f=false HTML Code: <table class="spuzzle"> <caption>Sudoku</caption> <thead> <tr> <th></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody> <tr> <th>A</th> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> </tr> <tr> <th>B</th> </tr> <tr> <th>C</th> </tr> <tr> <th>D</th> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> </tr> <tr> <th>E</th> </tr> <tr> <th>F</th> </tr> <tr> <th>G</th> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="goldbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> <td class="greenbox" rowspan="3" colspan="3"> <table class="sub"> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> <tr> <td>5</td> </tr> </table> </td> </tr> <tr> <th>H</th> </tr> <tr> <th>I</th> </tr> </tbody> </table> Hi,, in the attached file .. i was tryin to set image ->contact_13.jpg as the background image for that cell.. as <TD COLSPAN=6 background="images/contact_13.jpg"></TD> but its not setting it correctly .. the path and name of image is correct .. as far as i see it .. <td background='xyz.jpg'></td> works .. is it because of the colspan thing .. Hey, I'm trying to set something so simple as the TD width for 1 specific column, but it will NOT listen to me! http://www.unreal-deals.com/ebook/ad...i-showdata.php I've set the td width on the second column Item_Name to be 5000px, just to see if it would work. It does nothing. No matter if I set the table width to 100% or 300%, setting the TD width does not affect that TD... What am I missing here? Thanks I have the Firefox "Web Developer" extension which allows me to re-size the browser window to view the screen in a resolution like 800x600. It also has a check box named "Viewport", allowing me to re-size to that if I wish. Is the viewport what I should be looking at my site in...and what is it? Also, how do other designers test their site in different resolutions? What's the most practical way? Hi, I cannot get a table to display in a div on my site. If I change <table> to <div>, it works, but it is very tabular data and I need table styling. Code: <div id="stats_panel" style="display:none;"> <!--display is turned on by js when a button on page is clicked --> <a href="javascript:GoBack()"><img src="files/images/misc-images/close-button.png" alt="" style="float:left; position:relative; height:40px; width:40px; z-index:1;" /></a> <div id="stats_inside"> <div style="border:0; padding:2; width:100%;"> <div style="border-collapse: collapse; margin: 3px auto; border: 1px solid blue;"> <div><div>table</div></div></div></div></div> Above works, below will not work Code: <div id="stats_panel" style="display:none;"> <!--display is turned on by js when a button on page is clicked --> <a href="javascript:GoBack()"><img src="files/images/misc-images/close-button.png" alt="" style="float:left; position:relative; height:40px; width:40px; z-index:1;" /></a> <div id="stats_inside"> <table><td>hello</td></table> </div> Further, anything after the <table> declaration disappears. It will not show up. Site is www.uhstitans.com/schedule2.php Click one of the Stats buttons to see the pop-up. FURTHER INFO - EDIT I just noticed that by adding <table>, the content appears at the bottom of the page, instead of being hidden (display:none in the stats_panel div. also, the info trailing it drops to the bottom of the page. In a perfect world, it would all wait until the js is activated and then appear in the center of the page. THis is the result I get when I do not include <table> ad include <div>. Thanks in advance, Todd Hey guys I got help on a project I'm doing from Eri. Seems he used this tag in the code which is posted below. Anyways I did some research apparently Safari doesn't like this tag. His solution works great in IE6, IE7, and FF2/3 but in safari the layout dies. Has anyone messed with this type of solution. Check this out to see what I'm mean if you want a visual representation: http://browsershots.org/http://along...index_new.html Eric HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Personal Shopping and Concierge Services</title> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta name="keywords" content="INSERT KEYWORDS HERE" /> <meta name="description" content="INSERT DESCRIPTION HERE" /> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> <div id="wrap"> <div id="whitebox"> <div id="header"> <div id="logo"> </div><!-- end div logo --> <div id="pagetitle"> <h1>along came mary</h1> <h2>personal shopping and concierge services<br /> the metro atlanta area</h2> </div><!-- end div pagetitle --> <div class="clear"> </div> </div><!-- end div header --> <div id="main"> <div id="sidebar"> <div id="links"> <ul> <li><a href="/">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Customer Feedback</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Links</a></li> </ul> </div><!-- end div links --> <div class="clear"> </div> <div id="icea" align="center"> <img src="assnbanner2.jpg" alt=" " /> <p><a href="#">Proud Member of the International Concierge & Errand Association</a></p> </div><!-- end div icea --> </div><!-- end div sidebar --> <div id="content"> <h1>Take a deep breath. Call Mary. Relax. It's handled.</h1> <p> Whether it is shopping, running errands, organizing your home or office, caring for your pets and home while you are away or just waiting for a service contractor to arrive, Along Came Mary is ready when you are. It's like having a personal assistant for you and your home! </p> <p> Along Came Mary specializes in personal shopping and concierge services for individuals and families in the metro Atlanta area. Based in Vinings, an Atlanta, Georgia suburb, Along Came Mary prides itself on providing reliable, top-notch customer service to its clients. Our primary goal is to help busy people create a more balanced and therefore enjoyable lifestyle. When life becomes hectic, being able to make that call for help relieves stress and calms nerves! </p> <p> We know your time is valuable and thank you for visiting our site to learn more about how Along Came Mary can help you create a more balanced, productive, and manageable life. <a href="#">Contact us</a> so that we can show you how good life can truly be! </p> <p> Mary Snelson<br /> <a href="#">mary@marylovesshopping.com</a> </p> <p> 404.422.7564 </p> </div><!-- end div content --> <div class="clear"> </div> </div><!-- end div main --> </div><!-- end div whitebox --> <div id="footer"> <p> <a href="/">Home</a> | <a href="#">About Us</a> | <a href="#">Our Services</a> | <a href="#">Customer</a> | <a href="#">Contact Us</a> | <a href="#">Links</a> </p> </div><!-- end div footer --> </div><!-- end div wrap --> </body> </html> CSS Code: * { margin: 0px; padding: 0px; border: 0px none transparent; border-spacing: 0px; } body { background-color: #fcc1df; } #wrap { width: 100%; height: 100%; border: 0px none transparent; margin-bottom: 15px; } #whitebox { width: 700px; height: auto; background-color: #ffffff; border: 2px solid #000000; margin-top: 15px; margin-left: auto; margin-right: auto; } #header { width: 700px; background-color: #ffffff; border-bottom: 2px solid #e5e5e5; height: 160px; display: table; } #logo { width: 135px; height: 156px; background-image: url('ACM-Logo.png'); float: left; display: table-cell; } #pagetitle { width: 561px; height: 160px; display: table-cell; vertical-align: middle; position: relative; margin-left: 135px; } #pagetitle h1 { font-size: 250%; font-weight: bold; margin-left: 12px; margin-bottom: 0px; margin-top: 30px; } #pagetitle h2 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 80%; margin-left: 12px; font-weight: normal; margin-top:0px; } #main { width: 696px; height: 100%; } #sidebar { width: 140px; background-color: #ffffff; position: relative; float: left; height: 100%; display: table-cell; } #links { margin-bottom: 10px; float: left; height: auto; margin-left: 10px; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 80%; line-height: 125%; } #sidebar ul { list-style-type: none; margin-right: 5px; } #sidebar a:link { color: #000000; } #sidebar a:visited { color: #000000; } #sidebar a:hover { color: #f1037f; } #icea { width: 140px; height: 100%; display: table-cell; vertical-align: bottom; padding-top: 100px; } #icea a:link { color: #0000ff; text-decoration: none; } #icea a:visited { color: #0000ff; text-decoration: none; } #icea a:hover { color: #f1037f; text-decoration: underline; } #icea img { width: 132px; height: 96px; border: 0px none transparent; } #icea p { font-family: Arial, verdana, Helvetica, sans-serif; font-size: 70%; line-height: 175%; text-align: center; margin-left: 4px; margin-right: 4px; } #content { width: 442px; background-color: #ffffff; padding-left: 12px; height: 100%; position: relative; margin-left: 142px; border-left: 2px solid #e5e5e5; display: table-cell; } #content h1 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 100%; font-weight: bold; margin-top: 0px; margin-bottom: 10px; } #content p { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 90%; } #content a:visited { color: #0000ff; text-decoration: none; } #content a:hover { color: #f1037f; text-decoration: underline; } #content img { width: 132px; height: 96px; border: 0px none transparent; } #content p { font-family: Arial, verdana, Helvetica, sans-serif; font-size: 85%; padding-bottom: 18px; line-height: 125%; } #footer { width: 696px; margin-left: auto; margin-right: auto; margin-top: 8px; } #footer p { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 90%; text-align: center; } #footer a:link { color: #808080; text-decoration: none; border-bottom: thin dotted #808080; } #footer a:visited { color: #808080; text-decoration: none; border-bottom: thin dotted #808080; } #footer a:hover { color: #808080; text-decoration: none; border-bottom: thin dotted #f1037f; } div.clear { clear: both; font-size: 0%; line-height: 0%; width: 100%; } I am updating this groups old school website built with tables etc. The main images display to the left in Mozilla and centered in IE. http://www.sevenhawaii.com/ I am assuming, in this case MF is actually displaying it correctly. Does anyone have an idea of a quick fix? I haven't worked with tables in a long time. Mahalo, MJ Hello! Is there any way to make a table showing a folder in your FTP? I have an FTP thats is locked, so is there anyway to make it an autologin I just want it to show the files, not the 'Go up a directory' button And is there anyway to make tthe links so people can click on them to open the file the directory HOW CAN I DO THIS Tap Back Josh.R I don't know how to even debug this because it works in firefox but not IE. I display a table and use PHP script to populate the table. In explorer, the "fellow" value gets SKIPPED and then the next value ("rcf_date") gets put into that td, so everything gets screwed up! Looking at the code I can't figure out what it is about it that explorer doesn't like. Why on earth would it skip the fellow field? Here;s the php code that displays the table: Here's a link to a screenshot of the table in IE: http://bp1.blogger.com/_cy0zia_bU_s/...screenshot.png Here is the code to display that table. Any help would be appreciated: Code: <?php require('secure.php'); include "dateheader.php"; include "connectdb.php"; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Active consult patient list</title> <link href="stylesheets/simple.css" rel="stylesheet" type="text/css"> </head> <?php $query = "SELECT id_incr, patient_name, mrn, location, fellow, rcf_date, admission, consult_reason, impression, recs, comments ". "FROM active_consults WHERE signoff_status = 'a' ". "ORDER BY patient_name"; $results = mysql_query ($query) or die (mysql_error()); $num_pts = mysql_num_rows ($results); $consultheading =<<<EOD <table class="tablemargin" bgcolor="#CCCCFF" width = "98%" border = "1" cellpadding = "2" cellspacing = "2" align = "left"> <th> Name </th> <th> MRN </th> <th> Loc </th> <th> Fellow </th> <th> Date of Consult</th> <th> Reason for Admssion </th> <th> Reason for Consult </th> <th> Impression </th> <th> Recs </th> <th> Comments </th> <th> Update patient </th> </tr> EOD; echo $consultheading; while ($row = mysql_fetch_assoc ($results)) { ?> <tr> <td bgcolor="#FFFFFF" > <?php echo $row['patient_name'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['mrn'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['location'];?> </td> <td bgcolor="#FFFFFF" "> <?php echo $row['fellow'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['rcf_date'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['admission'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['consult_reason'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['impression'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['recs'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['comments'];?> </td> <td bgcolor="#FFFFFF" align="center"> <a href="editpatient.php?action=edit&id=<?php echo $row['id_incr']; ?>">[edit]</a> </td> </tr> <?php } ?> <td bgcolor="#CCCCCC" colspan=11 align="left" class="fineprint"> Total active patients: <?php echo $num_pts; ?></td></tr> <td></td> <tr> </tr> <tr><td align="center"><a href="newpatient.php">[ADD PATIENT]</a></td> <td align="center" COLSPAN=4><a href="displaysignoff.php">[DISPLAY SIGNED-OFF LIST]</a></td> <td align="center" colspan=3><a href="export.php">[EXPORT ALL PATIENTS (EXCEL)]</a></td> <td colspan=3 align="right"><a href="http://www.hfhpulm.com">[HFHPULM.COM]</a></td> </tr></table> problem is fixed, no need to read. Hello, I have a website that displays fine in every browser I've tested but Chrome. The only problem is my borders. In order to get fading rounded edges I made each block a 3x3 table, like this: Code: <div class="general"><table class="bgtable"><tr><td class="bgtopleft"></td><td class="bgtopcenter"></td><td class="bgtopright"></td></tr> <tr><td class="bgleft"></td><td class="primary"> example post </td><td class="bgright"></td></tr><tr><td class="bgbottomleft"></td><td class="bgbottomcenter"></td><td class="bgbottomright"></td></tr></table></div> and here's the applicable portion of my stylesheet: Code: body { font-family: sans-serif; font-size:11pt; letter-spacing : 0.03em; line-height : 130%; color:white; background-color:white; } .container { margin: 0 auto 0 auto; width: 900px; } .general { background-color:#70a055; margin: 0px 135px 10px 130px; } table.bgtable { border:none; border-collapse: collapse; width:635px; } table.bgtable tr { border:none; } .bgtopcenter { height:20px; background-image:url(/data/bgtopcenter.gif); background-repeat:repeat-x; } .bgtopleft { height:20px; background-image:url(/data/bgtopleft.gif); width:18px; overflow:hidden; } .bgtopright { height:20px; background-image:url(/data/bgtopright.gif); width:18px; overflow:hidden; } .bgbottomcenter { height:20px; background-image:url(/data/bgbottomcenter.gif); background-repeat:repeat-x; } .bgbottomleft { height:20px; background-image:url(/data/bgbottomleft.gif); width:18px; overflow:hidden; } .bgbottomright { height:20px; background-image:url(/data/bgbottomright.gif); width:18px; overflow:hidden; } .bgleft { background-image:url(/data/bgleft.gif); background-repeat:repeat-y; width:18px; overflow:hidden; } .bgright { background-image:url(/data/bgright.gif); background-repeat:repeat-y; width:18px; overflow:hidden; } In most browsers everything lines up right, but in chrome it looks like this: Any suggestions? Thanks for reading. I have a page on my web site that isn't displaying correctly. I've used the same template for all the pages - but for some reason this single page won't display correctly on foxfire, but fine on IE -- you can reach the page Here: I need the page to fit the screen display - but for some reason this page won't. I would be greatful for any help Thanks 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. Hello, My name is Eli and I cannot figure out why in the 2nd and 3rd rows of this HTML table there are empty spaces between the columns, making these rows go over the table width limitation of 770. I would really appreciate some help, as it is getting very frustrating and I am sure there is a very simple solution that I am missing. I've searched threads but could not find the right answer. Here is the table HTML code: <table border="0" align="left" cellspacing="0" cellpadding="0" width="770"> <tr> <td width="770" height="1" colspan="2" bgcolor="#FFFFFF"><img src="http://yst.sale-la-vie.com/images/spacer.gif" alt="spacer" width="4" height="1" border="0" align="middle" /></td> </tr> <tr> <td colspan="2" align="left" valign="top" bgcolor="0"><img src="http://yst.sale-la-vie.com/images/main-mid.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/right-mid.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-necklaces-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-earringss-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-goodlook-img.jpg" alt="" border="0" /></a></td> </tr> <tr> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-bracelets-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-summer-img.jpg" alt="" border="0" /></a></td> <td align="left"><img src="http://yst.sale-la-vie.com/images/mid-newlook-img.jpg" alt="" border="0" /></a></td> </tr> </table> Thanks and best wishes, Eli Hello Everyone, I have two pairs of jsp + servlet. The first jsp asks user to select an option from the drop down box and then on the click of submit button, passes this info to another servlet, who processes the data from db based on the input and displays the requested data in a table using second jsp page. My code is working but I'm trying to make my code look more appealing. Here is what the problem is: 1. The first page just has two drop down boxes with rest of the page blank. 2. Once the user selects the choice from first page, second page is displayed which does not anymore display what user chose in the drop down. What I want: is that initially the first page contains only drop down but as soon as the user hits the submit button, instead of loading a whole new page, the requested data is displayed right below the drop down boxes. Will this require to combine two jsp pages into one.....if yes, how do I make the table disappear the first time until some input is chosen. I know this is very basic html but as this is my first time, will appreciate the help. Thanks. Hi guyz, i have a query Mouse over the datagrid cell display tooltip or panel to display information but only using HTML and CSS not using javascript. can anyone help me. because im gonna use it on htmleditor on c# desktop application thax before Please look at this page: http://www.midwestbookreview.com/links/othr_rev.htm I would like to be able to have a format for a page like this with one blank column on the left and one blank column on the right (so I could just fill in my links). I would like the page blank the middle like it is now so I could add my main links. Can someone give me the basic html format on setting this up? Thanks. Link to site for reference: http://www.ante-up.org/v2/ Okay, this may be kind of a doozy, but after some thought, I've come to a point where I am looking into using php inc instead of an iframe for my content display, and I want to know how I could go about using divs to set up the site to look exactly the same with php inc. (EDIT: Minus the scrollbar from the iframe of course) Like if I stuck the Navigation and the Login section into one php file, the 'stats' and miniblog section into a second php file, the header and footer each in their own php file, how would I go about aligning the divs so that I could just php inc everything? I'm first off assuming that this would be the correct way to do it. Any suggestions are welcome so long as they're not about my table usage I'm aware that many don't prefer them, but I've made them work across five popular browsers, so I'm happy with it. TIA for any who can offer some insight. PS: I suppose I should also add that I'm pretty much an ignorant incompetent when it comes to div layers, so bear with me Hey. I'm new here, and I've recently taken some webmastering classes (needed them a lot more than I thought. I just love programming.), and I have had some concerns about what to do with alpha-transparency. See, what I want to do is have a background image (using a <div> tag and some basic CSS for this image alone), and that's all I will have. Is there any way to set the alpha of a background color so that it is transparent? Afterward, is there a way to set the alpha to text so that it is not transparent, either? I want a golden color background (FFCC00), with black text. Will this take another layer of CSS, or is this even possible? (Even with the classes, I'm still an absolute total newb.) Thank you very much in advance. Hello Everyone! This is my first thread on the forums. I look forward to the responses. But my question today seems simple but I am just a little confused on how to do this. You can tell me if I have this in the wrong place. So I want to make a player bio page, for a sport. I want to put a picture in the upper left hand corner and information about the player to the right of the picture and stats underneath. How would I achieve this? Like I said a picture in the left hand corner. That's the best I can describe it. My biggest problem is implementing the payers picture in there. Would I just make a separate division for the picture, information, and stats? Thanks in advance! if there is a tutorial or a forum post i would love to see it, thanks |