HTML - Table Or Div With Title In The Border
I drew this example in photoshop, but I know I've seen tables (or divs) set up this way before where the there is text in the border. I was thinking it was a simple script, or maybe even just a property.
I've searched everywhere and can't come up with an example. See my example below. Thanks!! Similar TutorialsHi everyone I have a Perl script that translates a text file into HTML table. The script works fine, it's the HTML part of it that doesn't work the way I want it. Here is the script. Code: #!/usr/bin/perl use strict; use warnings; print "Content-type: text/html\n\n"; my ($file1,$fileread1,@array1,$line1,$lastcol1,$firstcol1); $file1= '/home/yanni/scripts/testfiles/tempfile1'; open ($fileread1, $file1) || die "Could not open $file1: $!\n"; @array1 = <$fileread1>; close ($fileread1); #--> SET PAGE TITLE, POSITION & FONT SIZE print '<CENTER><STRONG><FONT SIZE="8">Blue</STRONG></CENTER>'; #--> SET TABLE TITLE print '<CENTER><TABLE BORDER="5" BORDERCOLOR="BLACK" WIDTH="30%" CELLPADDING="5" CELLSPACING="5"> <TR><TH COLSPAN="10"><H2><FONT SIZE="5">Work1</H2></TH></TR>'; print '<center><tr><th>Row 1</th><th>Row 2</th></tr><center>'; foreach $line1 (@array1){ ($lastcol1,$firstcol1)=split(/\s+/,$line1); print "<center><tr><td>$firstcol1</td><td>$lastcol1</td></tr>\n<center>"; }; ####################tempfile2##################### my ($fileread2,$file2, $array2,$line2,$lastcol2,$firstcol2); my $file2= '/home/yanni/scripts/testfiles/tempfile2'; open ($fileread2, $file2) || die "Could not open $file2: $!\n"; @array2 = <$fileread2>; close ($fileread2); #-->SET BROWSER TAB NAME print "<TITLE> TEST </TITLE>"; #--> SET TABLE TITLE print '<CENTER><TABLE BORDER="5" BORDERCOLOR="BLACK" WIDTH="30%" CELLPADDING="5" CELLSPACING="5"> <TR><TH COLSPAN="10"><H2><FONT SIZE="5">Work2</H2></TH></TR>'; print '<center><tr><th>Row 1</th><th>Row 1</th></tr><center>'; foreach $line2 (@array2){ ($lastcol2,$firstcol2)=split(/,/,$line2); print "<center><tr><td>$firstcol2</td><td>$lastcol2</td></tr>\n<center>"; }; ####################tempfile3#################### my ($fileread3,$file3, @array3,$line3,$lastcol3,$firstcol3); my $file3= '/home/yanni/scripts/testfiles/tempfile3'; open ($fileread3, $file3) || die "Could not open $file3: $!\n"; @array3 = <$fileread3>; close ($fileread3); #--> SET TABLE TITLE print '<CENTER><TABLE BORDER="5" BORDERCOLOR="BLACK" WIDTH="30%" CELLPADDING="5" CELLSPACING="5"> <TR><TH COLSPAN="10"><H2><FONT SIZE="5">Work3</H2></TH></TR>'; print '<center><tr><th>Row 1</th><th>Row 2</th></tr><center>'; foreach $line3 (@array3){ ($lastcol3,$firstcol3)=split(/\s+/,$line3); print "<center><tr><td>$firstcol3</td><td>$lastcol3</td></tr>\n<center>"; }; #print '<CENTER><STRONG><FONT SIZE="8">Blue</STRONG></CENTER>'; ######################putting the tables side by side####### print '<style type="text/css" media="screen">BODY { color:white; background-color:00100C; font-family:sans-serif; } table { border: 6px solid blue;float:left;width:400px;} table_container{width:800px;margin:0 auto;} </style>'; The HTML part of the script above it will give a title and then 3 tables side by side each one of them representing the content from a different text file. What I'm trying to do is create a new title and then produce some more tables from some other text files but when I put a new HTML title at the end of this script, the title goes above the 3rd table not below it. All I 'm trying to do is repeat the script above to translate some other text files into HTML on the same web page. Can anyone help me please? How do you center the title in a table. Code: <table> <th>Monsters</th> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> </tr> </table> Hi, I am developing a calendar application in ASP. The calendar is displayed in a table where each cell represents a date and has a + and - in it. The + represents people working on that date and the - those who are off. I need to add 'title' information to table cells so that when the user moves the cursor over the + or - the respective information to be shown. I tried to do this as follows: <td><title = "worklist">+</title><title="freelist">-</td> This doesn't work, nothing appears when the cursor hovers over either the + or -. I can combine the worklist and freelist and display it in one go with: <td title="listall">+=</title> but this is unsatisfactory. Too much data is displayed and the result looks messy. I dont want to double the amount of cells by having + and - in seperate cells either. Is there a trick that allows seperate <title> info in the same cell. Help would be appreciated, regards, Guy hello, i am getting the results in two columns after using the following code... import_request_variables('p','p_'); $connect=mysql_connect('localhost','gkkilaru','gkkilaru') or die('could not open:'. mysql_error()); mysql_select_db('gkkilaru_db'); $result=mysql_query("SELECT * FROM human WHERE $p_Searchtype='$p_Search'"); function returnResultsInColumns( $mysqlResult ) { $queryResults = NULL; if( mysql_num_rows($mysqlResult) > 0 ) { while($resultRow = mysql_fetch_array($mysqlResult)) { for ($intPos = 0; $intPos < mysql_num_fields($mysqlResult); $intPos++) { $fieldName = mysql_field_name($mysqlResult, $intPos); $currentArrayPos = ( isset( $queryResults[$fieldName] ) ? count( $queryResults[$fieldName] ) : 0); $queryResults[$fieldName][$currentArrayPos] = $resultRow[$fieldName]; } } $htmlTable = "<table>"; foreach( $queryResults as $field => $results ) { $htmlTable.= "<tr>"; $htmlTable.= "<td>" . $field . "</td><td>" . implode( ", ", $results ) . "</td>"; $htmlTable.= "</tr>"; } $htmlTable.= "</table>"; return $htmlTable; } else { return "The query returned no results."; } } // Pass the result of the MySQL query into the function. $tableLayout = returnResultsInColumns($result); echo $tableLayout; can anyone let me know the code for how to place a border or table for the result obtained? i have a table with a border of 0. i was wondering if it was possible to have only the very outlining border of the table be visible. Within the <table> tag, there is an attribute called frame. Can someone list for me the different values for the frame attribute. I know there is <table frame = rhs | lhs but I don't know what else there is other than rhs and lhs. Thanks I have (for my sins - should have read up on css earlier) a table-based site, essentially with header, footer, left and right cells and the main piece in the middle. I have used different background colours, but am wanting to highlight the middle bit. I have used a border, but that seems to centre on the edge of the cell - ie half the specified border size is inside the cell and half outside. The effect of this is that my two side pieces have whitespace before they start. Is there any way to specify a 'border' which stays totally within its relevant cell ? Thanks. Hi guys Attached is an image of the problem I'm having where in Firefox my table borders are not displaying correctly. I've coded using standard html as follows: Code: <table width=100% cellspacing="0" cellpadding="5" bgcolor="ffffff" border="1px" bordercolor="C0CFE2"> Any Ideas? The one on the left is the Firefox version. I have an issue. I really need to get rid of the borders in a html project i'm working on. I need to get ride of the borders to make a solid line from the left to the right. My screenshot is he http://terpconnect.umd.edu/~dwallac2/Screenshot.png <?php echo("<table border='0'"); for($i=0;$i<100;$i++){ echo("<tr border='0'>"); for($x=0;$x<100;$x++){ if($i%2){ echo("<td border='0'>"); } else{ echo("<td bgcolor='blue' border = '0'>"); } echo("hi"); echo("</td>"); } echo("</tr>"); } echo("</table>"); ?> i want the blue lines to be solid w/o the white dashes. I would appreciate anything you could do for me. Thanks Dave I'm trying to create a table border that is not continuous and leaves space for header/footer text. This is the only way I can describe it, and also see image: http://img691.imageshack.us/img691/747/tablefo.jpg Now, that was a custom vbulletin theme, which is php, obviously. Is this possible with tables and HTML, with a bit of CSS perhaps? Ok... I'm looking to create a border on the left and right of a table I have. I already have the image, but I'm curious as to how to impliment it, just on the left and right side.. Basically it'll make a drop shadow to the background of the page. The code for index.php is this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Web Hosting, Reseller Hosting, Dedicated Servers, Web Design - Blitzkrieg Computer Technologies</title> <meta name="description" content="Blitzkrieg Computer Technologies offers Reseller Website Hosting, Dedicated Server Hosting, Shared Website Hosting, Domain Name Registration, and Web Design at affordable prices with 24/7 support and industry-known service."> <meta name="keywords" content="web hosting, domain names, cheap web hosting, website hosting, web page hosting, web design, ecommerce web hosting, internet access provider, web hosting provider, web hosting services, internet web hosting,dedicated web hosting, award winning web hosting, domain hosting, domain registration, registrar, cheap domains, cheap registrar, cheap domain registration, website name, dedicated hosting, dedicated server, dedicated servers, dedicated web hosting, dedicated,cheap dedicated, cheap dedicated hosting, cheap dedicated servers, cheap servers, cheap dedicated linux hosting, cheap dedicated windows hosting, dedicated windows hosting, dedicated linux hosting, dedicated red hat hosting, dedicated centos hosting,dedicated windows server hosting,dedicated windows server 2003 hosting, managed dedicated hosting,managed colo, managed colocation"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> a:link {color: #D2D2D2;} a:visited {color: #D2D2D2;} a:active {color: #D2D2D2;} a {text-decoration: none;} </style> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body background="images/bgtex.jpg"><font size="2"> <table cellpadding="0" cellspacing="0" border="0" style="width:75% " align="center" valign="top"> <tr> <td valign="top" style="width:100%; background:url(images/top.gif) " height="144" > <table cellpadding="0" cellspacing="0" border="0" style="width:100% " align="center"> <tr> <td valign="top" style="width:50% " height="144"></td> <td valign="top" width="766" height="144"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="140"> <div style="margin-top:10px "><a href="?page=home"><img src="images/m1.gif" alt="" border="0"></a><a href="?page=sharedhosting"><img src="images/m2.gif" alt="" border="0"></a><a href="?page=resellerhosting"><img src="images/m3.gif" alt="" border="0"></a><a href="?page=dedicated"><img src="images/m4.gif" alt="" border="0"></a><a href="?page=vps"><img src="images/m5.gif" alt="" border="0"></a><a href="?page=design"><img src="images/m6.gif" alt="" border="0"></a><a href="?page=contact"><img src="images/m7.gif" alt="" border="0"></a></div> <div style=" margin-left:21px; margin-top:24px "><img src="images/logo.jpg" alt="" border="0"><img src="images/p1.jpg" style="margin-left:249px " alt="" border="0"></div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="144"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" > </td> </tr> <tr><td background="images/8_w1.gif"><font size="2" color="#D2D2D2"> <center> <a href="?page=about">About Us</a> | <a href="?page=contact">Contact Us</a> | <a href="?page=login">Customer Login</a> | <a href="?page=aup">Acceptable Use Policy</a> | <a href="?page=tos">Terms of Service</a> </center></font></td></tr> <tr><td valign="top" style="width:100%; background:url(images/2_bg.gif) " height="3" ></td></tr> <tr> <td valign="top" style="width:100%; background-color:#686868" height="410"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766" > <tr> <td valign="top" style="width:50% " height="410"></td> <td valign="top" width="766" height="410"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="410"> <div style=" margin-left:13px; margin-top:22px; margin-right:0px; line-height:15px " class="s"> <font color="#D2D2D2" size="3"> <?php if (isset($_GET['page'])) { switch ($_GET['page']) { case "home": include ('home.php'); break; case "thanks": include ('thanks.php'); break; case "sharedhosting": include ('sharedhosting.php'); break; case "hosting": include ('hosting.php'); break; case "ip": include ('ip.php'); break; case "domain": include ('domain.php'); break; case "resellerhosting": include ('resellerhosting.php'); break; case "domain": include ('domain.php'); break; case "custom": include ('custom.php'); break; case "design": include ('design.php'); break; case "speedtest": include ('speedtest.php'); break; case "vps": include ('vps.php'); break; case "about": include ('about.php'); break; case "construction": include ('construction.php'); break; case "cpanel": include ('cpanel.php'); break; case "tos": include ('tos.php'); break; case "contact": include ('contact.php'); break; case "login": include ('login.php'); break; case "testimonials": include ('testimonials.php'); break; case "quote": include ('quote.php'); break; case "emailhosting": include ('emailhosting.php'); break; case "dedicated": include ('dedicated.php'); break; case "entrydedicated": include ('entrydedicated.php'); break; case "smallbizdedi": include ('smallbizdedi.php'); break; case "enterprisededi": include ('enterprisededi.php'); break; case "aup": include ('aup.php'); break; case "customdedicated": include ('customdedicated.php'); break; default : include 'home.php'; break; } } else { include 'home.php'; } ?></font><br><br><br> </div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="410"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/bg2.gif) repeat-x top " bgcolor="#FFFFFF" height="17"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766"> <tr> <td valign="top" style="width:50% " height="17"></td> <td valign="top" width="766" height="17"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="17" style="background:url(images/7_p1.jpg) no-repeat top right "> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="17"></td> </tr> </table> </td> </tr> <tr> <td valign="top" style="width:100%; background:url(images/bottom.gif) " height="65"> <table cellpadding="0" cellspacing="0" border="0" style="width:100% " width="766"> <tr> <td valign="top" style="width:50% " height="65"></td> <td valign="top" width="766" height="65"> <table cellpadding="0" cellspacing="0" border="0" width="766"> <tr> <td valign="top" width="766" height="65"> <div style=" margin-left:16px; margin-top:25px "><font size="2" color="#696969"><center> Copyright © 2003-2009 Blitzkrieg Computer Technologies. All Rights Reserved.<br></center></div> </td> </tr> </table> </td> <td valign="top" style="width:50% " height="65"></td> </tr> </table> </td> </tr> </table> </font> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-3505975-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> I have a problem on my forum, in the home page, the forum list is made up of a grid, but the spacing inbetween each spot is too big and therefore it looks kind of stupid. Any ideas? Heres the site http://techoftheweekpodcast.com/index.php I am building an adwords landing page. The URL is he http://www.amanochocolate.com/adwords/dark-chocolate If you notice, I have put a text block on the right that is all black. I wanted it to have rounded corners so I used some graphics to achieve that. However, for some reason, the table cell color is showing up around the border even though I have no borders set for the table. (I.,e., border:0pt) Also, the border I don't want on the bottom is thicker for some odd reason. I've seen this before but have never figured out what causes this. I would simply like my table borders to be really clean (and gone). Any ideas? -Art For this page on my site: http://www.monkeygambling.com/new%20...ingindex.shtml I am having trouble with the borders on the central part. I have created an external css file with these commands table.border { border-top:1px outset "gray"; border-right:1px outset "gray"; border-bottom:1px outset "gray"; border-left:1px outset "gray"; } td.border { border-top:0px inset "gray"; border-right:1px inset "gray"; border-bottom:0px inset "gray"; border-left:1px inset "gray"; } I want a border with one px width like a normal table, but I don't want the cells to have horizontal borders where the <hr> are. I have got the table to have a border around it, but I want the double line with highlighted edges like in a normal table. If that makes sense could anyone help me? thanks Hi, I'm trying to make a border with a 50x50px image repeated around it this is the code I have so far; <html> <head> <title>div test</title> <style type="text/css"> #outer { background-image: url(http://i890.photobucket.com/albums/a...oxBorder.jpg); background-repeat: repeat; background-color: #cccccc; width:100%; padding: 3em; } #inner { background-color:#ffffff; padding: 2em; } p {margin: 0px;} </style> </head> <body> <div id="outer"> <div id="inner"> <p> Blah blah blah </p> </div> </div> </body> </html> I want the image around the border to be showing the same as it does at the top, at the bottom. And i want the size of the table to be increased when new text is added into it each time. Can somebody please help me? Thankkksss. Hello, I'm having trouble with the bold line in the code below: Code: <html> <head> <title>H&R Properties</title> <style type="text/css"> table.master { height: 100%; } td.banner { height: 100px; text-align: center; } span.banner { font-size: 24pt; } td.news { width: 200px; padding-top: 10px; text-align: center; } iframe.news { width: 100%; height: 100%; } td.menuandcontent { width: 530px; } table.menuandcontent { width: 100%; height: 100%; } td.menu { height: 50px; background: url('menu_bg.jpg'); text-align: center; } td.content { text-align: center; } iframe.content { width: 100%; height: 100%; } </style> </head> <body> <table class="master" cellspacing=0 cellpadding=0 border=1> <tr><td colspan=2 class="banner"> <span class="banner"> <img src="H&R banner.jpg" border=0></span></td></tr> <tr> <td class="news"> <iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe> </td> <td class="menuandcontent"> <table class="menuandcontent" cellspacing=0 cellpadding=0 border=0> <tr> <td class="menu"> <table cellspacing=0 cellpadding=0 border=0> <tr> <td><img src="home.jpg" border=0></td> <td><img src="properties.jpg" border=0></td> <td><img src="about.jpg" border=0></td> <td><img src="contact.jpg" border=0></td> </tr> </table> </td></tr> <tr> <td class="content"> <iframe class="content" src="content.html" srollable=yes frameborder=0></iframe> </td> </tr> </table> </td> </tr> </table> </body> </html> This code produced this: http://www.shahspace.com/border1/ But if I do something as simple as set border to 0 in the bolded line above, I get this: http://www.shahspace.com/border0/ The banner is all of a sudden shifted to the right by about 20 pixels. Why is this? Hey! I was making a navigation bar that goes to the left of the content (there is a main nav at the top and a subnavigation for the page to the left). Here's the layout |----banner------| ==========main nav ll content ll content ll content the vertical equal signs (aka L's ) on the left are the things that are troubling me. I don't want there to be a border but the page for some reason keeps coming up with a small space between the left, bottom, and top of the subnav. Here's my code for the subnav and the content: Code: <table width="100%" cellpadding="0px" style="height: 100%; align: left; background-color: #ffffff; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 0px;" cellspacing="0px"> <tr><td> <table cellpadding="0px" cellspacing="0px" width="130px" style="height: 100%; align: center; valign: middle; background-color: #FF7F00; border-left: 0px; border-bottom: 0px; border-top: 0px; border-right: 5px solid #ff0000;"> <tr><td align="center">A Brief History</td></tr><tr><td align="center">Who We Serve</td></tr><tr><td align="center">The Difference</td></tr></table></td> <td> <table cellspacing="0px" cellpadding="5px"><tr><td><b>About Us</b></td></tr></table> <blockquote> content </blockquote> <blockquote><p>content</p></blockquote> </td></tr></table> I think I've totally given up on this, but thought I still pick all of your brains. I'm working with a CMS that has hardcoded tables so that even when you have border="0", a border still shows up on the live page. It's absolutely driving me nuts. Here's what I'm aiming at: I want to place 5 photos going down the right-hand side of the page. The only way I have figured out how to do this is through a table, but the border shows and makes the entire page look like crap. Any other ideas on how I can accomplish this? Thanks! Hey guys! I have created a table with images in it and for some reason the table doesn't exactly fit (in height) the images, it has like a little 5px border at the bottom and I can't figure out why. I have attached a picture showing the problem. In the image, the gray border is supposed to be there, and is part of the images and background image. But I want the table to end directly at the bottom of the gray bar, and for some reason it has a little lip at the bottom in which the background image begins to repeat again. My code is as follows: 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> <title>QuickID | Setup Your Account</title> <style type="text/css"> <!-- a:link { color: #777676; text-decoration: none; font: verdana} a:visited { color: #777676; text-decoration: none; font: verdana} a:hover { color: #3366CC; text-decoration: underline; font: verdana} a:active { color: #777676; text-decoration: none; font: verdana} --> </style> </head> <body topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 background="images/bg.gif"> <table cellpadding=0 cellspacing=0 width=100% border=0 align=center background="images/top_bar_bg.jpg"> <tr> <td> <table width=980 cellpadding=0 cellspacing=0 align=center style="white-space: nowrap;" height=38> <tr> <td align=left> <img src="images/top_bar_logo.jpg" border=0 height=38 ALT="logo"> <img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider"> </td> <td align=left width=750> hello! </td> <td align=right> <img src="images/top_bar_divider.jpg" border=0 height=38 ALT="divider"> </td> <td align=right> <img src="images/top_bar_settings.jpg" border=0 height=38 ALT="settings"> </td> <td align=right> <img src="images/top_bar_logout.jpg" border=0 height=38 ALT="logout"> </td> </tr> </table> </td> </tr> </table> </body> I'm trying to make css style table border width thickness. My coding is <tr> <td height="10" style="white-space: nowrap; border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: .9pt solid brown; padding: 0px"></td> </tr> When i run in html file, it'ok and it's work fine. But when i put this code in php file, it doesn't work. Is there any special coding do i need to modify for php file type? Please share with me if anyone has an idea or experience. Thanks in advance. |