|
HTML - Multiple Sortable Columns
I've been asked to create a web page containing 10 columns and 20 rows. Easy enough. But the request is for columns that can be individually sorted, and and for the life of me I dont know how to do this!
Using Dreamweaver. Advice gratefully received! Similar TutorialsI need to create a <select multiple> type form control, but with two columns. Is this possible? So I need users to be able to select multiple options from a control that displays items in two columns, and should be scrollable. Is there anyway to do this using the default HTML <select multiple> control. if not, is there a more complex method? I'm a graphic design guy trying to fumble my way through html coding and having a really hard time make a simple html table sortable. I've followed several tutorials trying to make it work but to no avail. Here's the table im trying to make sortable: http://www.mediafire.com/?4wfefyz0zyo If anyone would so kind as to make the necessary edits and send it back to me thatd be fantastic! If not, any help or guidance is appreciated. Thanks! Hello, I would like to make my two column web page into 3 columns and dont know how to do this. It is a template and I cannot figure out where to put the <td>. My site is online and then I hope to delete this link if it is possible. Please no negative remarks as I am notlooking for visitors I just want help. please. ] Here is the code I want to put into the code but not sure where to put it to get the 3rd column. I hope someone will be kind enough to help . thanks. <td width="200"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <p> <a href="index.html">Home</a> </p> </td> </tr> </table> the bold stuff is what i added in to try and make it sortable and it didn't work. Code: <?xml version="1.0" encoding="UTF-8"?><!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"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title />
<link rel="stylesheet" type="text/css" href="example.css"/>
<meta name="author" content="my name" />
<link href="http://www.joostdevalk.nl/" rev="made" />
<script type="text/javascript" src="sortable.js"></script><meta name="generator" content="StarOffice/OpenOffice.org XSLT (http://xml.openoffice.org/sx2ml)" /><meta name="author" content="my name" /><meta name="created" content="2007-04-03T18:49:47" /><meta name="changedby" content="Ryan Gleason" /><meta name="changed" content="2007-05-04T16:38:49" /><base href="." /><style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; }
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { padding:0; }
* { margin:0; }
*.ta1 { }
*.ce1 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-style:none; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.ce2 { font-family:Arial; border-bottom-width:0.0351cm; border-bottom-style:solid; border-bottom-color:#000000; border-left-width:0.0133cm; border-left-style:solid; border-left-color:#000000; border-right-width:0.0133cm; border-right-style:solid; border-right-color:#000000; border-top-style:none; font-weight:bold; }
*.Default { font-family:Arial; }
*.Heading { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Heading1 { font-family:Arial; text-align:center ! important; font-size:16pt; font-style:italic; font-weight:bold; }
*.Result { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.Result2 { font-family:Arial; font-style:italic; font-weight:bold; text-decoration:underline; }
*.co1 { width:1.3516in; }
*.co10 { width:0.7854in; }
*.co11 { width:0.5681in; }
*.co12 { width:0.8925in; }
*.co2 { width:0.9925in; }
*.co3 { width:0.6984in; }
*.co4 { width:0.622in; }
*.co5 { width:0.372in; }
*.co6 { width:0.3827in; }
*.co7 { width:0.9055in; }
*.co8 { width:0.6661in; }
*.co9 { width:0.6772in; }
*.ro1 { height:0.1783in; }
</style></head>
<body dir="ltr">
<table class="sortable" id="anyid" cellpadding="0" cellspacing="0">
<table border="0" cellspacing="0" cellpadding="0" class="ta1">
<colgroup><col width="150" /><col width="110" /><col width="78" /><col width="69" /><col width="41" />
<col width="42" /><col width="101" /><col width="110" /><col width="74" /><col width="78" /><col width="75" /><col width="75" /><col width="75" /><col width="87" /><col width="63" /></colgroup>
that should be what you need..i exported an excel file as an xhtml file and read the source code and that's how it was, real unorganized and such. basically it's got stats of baseball players and i want to make them easily sortable. i created a sortable table using another piece of code but have to manually enter everything in if i do it that way. Please help. This is what I have so far http://bartletagency.com/m/x2.php Now, obviously with business cards there many different options. I need something to calculate on the side the total after picking each drop box option, or if easier, after hitting "calculate total." (preferably with the numbers in a table so I can make it appear by itself right underwear the send button) . Example: 1000 business cards in blue, say, would need to come up at 50 dollars if they pick 3-1, but if they pick 3-22 it needs to come up 60 dollars if they pick the other color, green, and pick 3-1, the label would need to turn to $55.00, if they pick 3-2 with the color green the label would need to say $65.00 how can i do this please? here is the code I have which made up the PHP file i linked you to above. code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Lesson 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <?php if ($_SERVER['REQUEST_METHOD'] != 'POST'){ $me = $_SERVER['PHP_SELF']; ?> <h1 align="center">Business Cards</h1> <form name="form1" method="post" action="<?=$me?>"> <table border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td align="right" valign="middle">Quantity:</td> <td><select name="Quantity: "> <option value="1000">1000</option> <option value="2500">2500</option> <option value="5000">5000</option> <option value="10,000">10,000</option> </select> </td> </tr> <tr> <td align="right" valign="middle">color</td> <td><select name="color"> <option value="blue">blue</option> <option value="green">green</option> </select> </td> </tr> <tr> <td align="right" valign="middle">3</td> <td><select name="3"> <option value="small">3-1</option> <option value="medium">3-2</option> </select> </td> </tr> <tr> <td> </td> <td><input type="submit" name="Submit" value="Send"> </td> </tr> </table> </form> <?php } else { error_reporting(0); // initialize a array to //hold any errors we encounter $errors = array(); // test to see if the form was actually // posted from our form $page = $_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']; if (!ereg($page, $_SERVER['HTTP_REFERER'])) $errors[] = "Invalid referer<br>\n"; // check to see if a name was entered if (count($errors)>0) { foreach($errors as $err) echo "$err<br>\n"; echo "<br>Please use your browser's Back button to fix."; } else { // no errors, so we build our message switch($_POST['color']){ case 'red': $recipient = 'mathew420@gmail.com'; break; case 'green': $recipient = 'mathew420@gmail.com'; break; case 'blue': $recipient = 'mathew420@gmail.com'; break; default: $recipient = 'mathew420@gmail.com'; } $subject = "Widget On Line Order"; $from = stripslashes($_POST['Name']); $msg = "Message sent by $from\n"; $msg.="\nSize: ".$_POST['size']; $options=$_POST['options']; $msg.="\nOptions:"; if ($options) for ($i=0;$i<count($options);$i++) $msg.= "\n- $options[$i]"; else $msg.="\n- None"; $msg.="\nColor: ".$_POST['color']; $extension=($_POST['extension'])?"Extension: Yes":"Extension: No"; $wallmount=($_POST['wallmount'])?"Wallmount: Yes":"Wallmount: No"; $deskmount=($_POST['deskmount'])?"Deskmount: Yes":"Deskmount: No"; $msg.="\n$extension\n$wallmount\n$deskmount"; $msg.="\n".stripslashes($_POST['MsgBody'])."\n"; if (mail($recipient,$subject,$msg)){ echo "<p>Thanks for your order!</p>"; echo nl2br($msg); } else echo "An unknown error occurred."; } } ?> </body> </html> thanks so much I've been playing about with columns, and it really bugs me when I cant get to do it correctly, I need to know how to make a three column page like this one- http://watchseries.eu/ I know there is a lot of float involved, and no matter how much I try, I cannot get the hang of it. I've also read the column tutorial on this forum with no help. How hard can it be? I already posted a similair item like this on a dutch forum (for those who do not know: I am dutch) but that ended in no result. Imagine yourself the painting from I think it was Barnett "Who is afraid of red, yellow and blue. Or better... take the French flag ( http://www.e-s-e-a.com/FRENCH%20FLAG.png ) Now could you or anyone else write me the script that would give me three columns? The left column 15% The right column 15% The middle column 70% I read that giving the columns a width in percentages was better because of screensizes. No header. No footer. Just 3 columns. It has to be like the French flag all over your screen. Well you don't have to give the columns exactly the same colors but it would be nice. Seriously, why does it hate me? The math is all correct and it lays out perfectly fine in firefox as expected. Can anyone give me a tip as to what's wrong here before I trash this whole idea and go with a reliable table. 2 columns. 15px left and right margins on the "left" column, 470px wide 15px right margin on the "right"column, 455px wide 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; width: 970px; background: #e1e1e1; }
#wrap { padding: 10px 0; background: #fff; }
#left { margin: 0 15px; width: 470px; height: 100px; float: left; background: #f00; }
#right { margin: 0 15px 0 0; width: 455px; height: 100px; float: right; background: #666; }
</style>
</head>
<body>
<div id="wrap">
<div id="right"></div>
<div id="left"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
I am adding an event to a web page I have inherited from someone else. I don't have access to the CSS styles in the webpage, so I have to use existing styles. The page is supposed to line up in two columns, and used to do that before my updates today, but for some reason now is all in one long column. I could use another set of eyes, as I can't seem to see the reason it is having problems. Can you help me? I need to get an answer this morning or I will have to change the page back so that it looks correctly even if it has old information. This is my code. I am getting the results as rows/horizontally. I want the entire results to be displayed in 2 columns. can anyone help me out.? mport_request_variables('p','p_'); $connect=mysql_connect('localhost','********','********') or die('could not open:'. mysql_error()); mysql_select_db('gkkilaru_db'); $result=mysql_query("SELECT * FROM human WHERE $p_Searchtype='$p_Search'"); if (mysql_num_rows($result)>0) { echo "<table cellpadding='1' cellspacing='1' bordercolor=pink width='800' border='1'>"; echo "<tr align='center'>"; echo "<td>KEGG_ID</td>"; echo "<td>Gene_Name</td>"; echo "<td>Uniprot_ID</td>"; echo "</tr>"; while($row = mysql_fetch_object($result)) { echo "<tr align='center'><td>"; echo $row->KEGG_ID; echo "</td><td>"; echo $row->Gene_Name; echo "</td><td>"; echo $row->Uniprot_ID; echo "</td><td>"; } } else { echo "<tr align='center'><td>"; echo "<br/><br/><font size='4' color='red'>"; echo "No Records Found!</p>"; echo "</td></tr>"; } //mysql_close($connection); } break; } I tried to solve this...but I was unable to do it. Please help me I was wondering how I can make 3 equal size div columns inside of a iframe? Because my site www.PrimeNewsCenter.com and I have 3 iframes right now inside the main iframe on the front page and although it looks good in IE it looks really bad in all other browsers and divs dont look like that. Thanks! Thanks to Coothead over here I got what I wanted. Unfortunately the web is so .. how do you say it... polluted... that sometimes it is really hard to find what you want, not to say impossible. So I got: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>driekleur pagina</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#linkerkolom {
width:15%;
height:100%;
float:left;
background-color:#776644;
}
#middelste_kolom {
width:70%;
height:100%;
float:left;
background-color:#fff;
}
#rechterkolom {
width:15%;
height:100%;
float:left;
background-color:#776644;
}
</style>
</head>
<body>
<div id="linkerkolom"></div>
<div id="middelste_kolom"></div>
<div id="rechterkolom"></div>
</body>
</html>
But how do you create a header? Lets say about 3 inches in height. And in the color black. I tried to do it but I failed. Anyone? I feel rather stupid asking this question, because I'm certain it's so simple to fix... Please see this HTML eBay template http://www.bluelagoonproducts.com/template-noncss.html As you can see there are 2 main colums: A - The menu (Store catagories) on the left B - Content (Description) on the right. I need the menu on the left to stay at the top, rather than in the middle. When column B has more content or paragraphs than column A, Column B stays in the middle relative to the page. Hope someone can help? Hi all, I'm new to the forum and was hoping I could get some quick help, since I am not a web publishing expert. I've got a basic table set up with multiple rows but different column widths (i.e. 2 columns in one row, 3 columns in another row, both rows with different column widths). Basically I want each row to span the entire table width. However, it comes out fairly mutated instead :: 1st row becomes 2 filled and 1 empty column, 2nd row becomes 3 columns that are unequally spaced. In one row, <table width="100%" border="2" bordercolor=BLACK cellspacing="0" cellpadding="10"> <tr valign="top"><td width="50%" align="center"> SOME BODY TEXT HERE</p></td> <td width="50%" align="center" bgcolor="#FFFFFF"> SOME BODY TEXT HERE</p></td> </tr> Closely following that row, another row with:: <tr valign="top"> <td width="33.3%">SOME BODY TEXT HERE</td> <td width="33.3%">SOME BODY TEXT HERE</td> <td width="33.3%">SOME BODY TEXT HERE</td> </tr> </table> What's wrong here? PS This is for an HTML e-mail marketing campaign, so I do not believe CSS is an option Hi, Basically I was wondering how I can give a page "columns" I want to set it up with the normal heading I'm using, then do something like this: (column 1) ______ | ______ (column 2) _______________ | ________ ... Sign Up ________ | _______ Member Name: _ [box] ___________________________ Password: _ [box] Hello, I would like to add a table or <diiv> behind the columns on this blogger template and add a border to it. I'm not so sure of how to do this. I'm new to blogger XML templates. Please excuse me, I'm a little rusty. It's a free template called WhiteMagic and it has CSS in it as well. In this kind of template what kind of table or div should I add and what code? I'm not quite sure on what code to put for a table or <div>. Do you know? or maybe a website that can point me to it? Example: http://solitude-of-heart.blogspot.com/ I'm not going to use that template^ because it doesn't meet the rest of my needs. However I'd like to add a table or div that has a border. Here is an updated code. http://pastebin.com/W1Ff7BpQ My website: www.MarinaElizabeth.com customized WhiteMagic Thank you in advance I'm blocked at a weird scenario. I have the following HTML table: Code: <table border="1" width="600" class="sample"> <tr> <th style="display:none;">Revision Number</th><th>Date</th><th>User</th><th>Comments</th> </tr> <tr> <xsl:call-template name="splitEveryNTermsForTable"> <xsl:with-param name="inputString" select="$dataattribute"/> </xsl:call-template> </tr> </table> The XSL template splits the "dataattribute", which is a ~ delimited string into 4 values per row. Can i control the display of either of the 4 columns using HTML using this case? I want to hide one of the columns. Thanks in advance! How can you make a border appear between rows in a table but not between the columns? Hence you won't notice that there's actally any columns in the table since it's not squared, only the rows are marked, but the columns still are there to prevent the cells from ending up at different horizontal positions at the different rows. So we have the script for a perfect 3 column webpage. And one with a header. And one with a footer. And one with a header and a footer. But now I would like to build a 3 column website with something else. Look at your screen. Then imagine 3 columns. The left column 15%, the middle column 70% and the right column 15%. Draw imaginary lines. Now draw a line between the left and right column say 40 px from the top of the screen. Then again take the below standing script and draw a line between the two columns 20 px from the bottom. Does anyone know how to do this? HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>driekleur pagina</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
}
#linkerkolom {
width:15%;
height:100%;
float:left;
background-color:#333333;
}
#middelste_kolom {
width:70%;
height:100%;
float:left;
background-color:#fff;
}
#rechterkolom {
width:15%;
height:100%;
float:left;
background-color:#333333;
}
</style>
</head>
<body>
<div id="linkerkolom"></div>
<div id="middelste_kolom"></div>
<div id="rechterkolom"></div>
</body>
</html>
I've recently been working on my first site, which is a complete revamp of an old one. It's a 3 column design, with the central area displaying thumbnails. Here it is.. www.sevensofmacclesfield.co.uk I'm getting all sorts of problems when zooming / text enlarging on various browsers ( Ctrl +/-) - particularly the bottom right hand side, where the sidebar joins the footer It's gone live, and I've run out of ideas to sort it out - can anyone offer any advice? Any help will be invaluable! Thermos |
|||||||