|
HTML - <label> Table Rows
Afternoon everyone,
I have a table with many rows and a checkbox in the first cell of each row. I want the user to be able to click anywhere on the row and activate the checkbox, so I'm using a label tag in front of each row. The following code works in IE7, but not Firefox or Chrome. Any ideas how to make it work cross-browser? Code: <table>
<label for="X">
<tr>
<td>
<input type="checkbox" id="X"/>
</td>
<td>
THIS TEXT SHOULD ACTIVATE THE LEFT CHECKBOX
</td>
</tr>
</label>
</table>
Thanks! Similar TutorialsI am working on a layout for a website, I'm not new at all to HTML, it's just been a while. I have a banner taking up the first row of the table(colspan=2), and for the 2nd row, I have a menu and a text region. This 2nd row always has a small space between it and the 1st, even if cellspacing=0. Is there any way to do this with a simple <table>??? Someone told me that using a table would be less effective than using <div>, is this true? If so, how would I do this using <div>. Thank you for any suggestions. Hi All, Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor: But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346 Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch! Hi there, I'm a bit of a noob to HTML, and I'm working on creating a site for my webcomic. The main portion of the layout has a simple table with a header and footer at the top and bottom rows. It's supposed to look like Instead it looks like The code for the table is this: Quote: <table align="center" cellpadding="0" cellspacing="0" border="0" width="725"> <tr> <td width="725" valign="bottom" border="0"> <img src="/images/header.png" width="725" height="33" /></td> </tr> <tr> <td width="725" bgcolor="0099CC" align="center"> <p>***todays_comics***<p>***first_day*** ***previous_day*** ***next_day*** ***last_day*** </td> <tr> <td width="725" valign="top" border="0"> <img src="/images/footer.png" width="725" height="33" /></td> </tr> </table> Whenever I put the code into an HTML test bed, it works fine, but for some reason refuses to work when I upload it to my FTP. It's driving me crazy. If you could help, I'd really appreciate it. Thanks. Can anyone tell me why there is a space at the bottom of my page between the images in the middle and the bottom image? The page looks fine in Firefox and I cannot figure out why there is a space in IE7. Any suggestions would be greatly appreciated. Thanks Frank http://www.spartafitness.com/home.htm I am working on an application within a website. Most of the HTML for the entire site, I did not create myself, just some HTML and CSS for a specific application. Even in that application, I imported some of the text (which contains HTML tags) from a previous application. So, I only did a small portion of the HTML/CSS. My problem is that when users print out this page in IE6, some of the rows of the main table are missing from the printout. For example, this page: http://www.northcarolina.edu/pe_test/sample_pe.php Does any one have any knowledge of a bug that would cause IE6 not to print some rows? Does any one see any reasons why some rows in the tables (the ones with class='workplan') would skip rows when printing? Thank You. Hi. I'm working on a fairly complicated web form and need to align input boxes horizontally across a lefthand column, a multi-row nested table, and a righthand column. This works OK (as long as cellpad and cellspace are set to 0) except that at one point I need to put text in the right-hand column instead of an input box, and this throws the alignment out. The simplified code below shows what I mean. As given below the boxes are aligned properly. But if you comment out the version A row and substitute the version B row, the alignment goes. Can anyone explain why this happens, and whether there's a way round it ? The form in question does have to be a table, by the way. Would be grateful for any suggestions ! Thanks Dedge <form> <table width='100%' cellspacing='0' cellpadding='0' border='0'> <tr> <td>Item name</td> <td rowspan='5'> <table cellspacing='0' cellpadding='0' border='0'> <tr> <td><input name='i1' id='i1' size='1' maxlength='1'></td> <td><input name='i2' id='i2' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i3' id='i3' size='1' maxlength='1'></td> <td><input name='i4' id='i4' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i5' id='i5' size='1' maxlength='1'></td> <td><input name='i6' id='i6' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> <tr> <td><input name='i7' id='i7' size='1' maxlength='1'></td> <td><input name='i8' id='i8' size='1' maxlength='1'></td> </tr> </table> </td> <td>Item name</td> <td><input name='ia' id='ia' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ib' id='ib' size='1' maxlength='1'></td> </tr> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--VERSION A--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ic' id='ic' size='1' maxlength='1'></td> </tr> <!--END OF VERSION A--> <!--VERSION B--> <!--<tr> <td>Item name</td> <td colspan='2' align='right'>SOME TEXT</td> </tr>--> <!--END OF VERSION B--> <tr> <td>Item name</td> <td>Item name</td> <td><input name='ie' id='ie' size='1' maxlength='1'></td> </tr> </table> </form> Ok, I am creating a calculator with html and javascript. I am using a table to format the buttons and text displays. The code is posted below with the table itself. It is supposed to be 3 cells height and 1 cell width but it turns out as 2 cells width and 2 cells height. I can't figure out the error in my code so can someone please figure out what is wrong with my tags: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type=text/css>
input
{
background-color: black;
color: white;
}
th
{
background-color: black;
color: white;
}
td
{
background-color: green;
}
</style>
<script type="text/javascript">
var a;
var b;
var c;
var d;
var e;
function inputtext(inputtext)
{
a=document.getElementById("inputcalculation").value;
b=inputtext;
c=a+b;
document.getElementById("inputcalculation").value=c;
}
function Evaluate()
{
d=document.getElementById("inputcalculation").value;
e=eval(d);
document.getElementById("outputcalculation").value=e;
document.getElementById("inputcalculation").value="";
}
</script>
<title>Help-In-Math Calculator</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="11" style="background-color: black">
<center>
<input type="text" id="inputcalculation" value="" />
</center>
</th>
</tr>
<tr>
<td colspan="11" rowspan="5">
<center>
<input type="button" value="1" onclick="inputtext('1')" /> <input type="button" value="2" onclick="inputtext('2')" /> <input type="button" value="3" onclick="inputtext('3')" /> <input type="button" value="+" onclick="inputtext('+')" />
<br />
<input type="button" value="4" onclick="inputtext('4')" /> <input type="button" value="5" onclick="inputtext('5')" /> <input type="button" value="6" onclick="inputtext('6')" /> <input type="button" value="-" onclick="inputtext('-')" />
<br />
<input type="button" value="7" onclick="inputtext('7')" /> <input type="button" value="8" onclick="inputtext('8')" /> <input type="button" value="9" onclick="inputtext('9')" /> <input type="button" value="X" onclick="inputtext('*')" />
<br />
<input type="button" value="0" onclick="inputtext('0')" /> <input type="button" value="." onclick="inputtext('.')" /> <input type="button" value="00" onclick="inputtext('00')" /> <input type="button" value=÷ onclick="inputtext('/')" />
<br />
<input type="button" value="EVALUATE" onclick="Evaluate()" style="background-color: blue"/>
</center>
</td>
</tr>
<tr>
<td colspan=11>
<input type="text" id="outputcalculation" onfocus="blur()" />
</td>
</tr>
</table>
</body>
</html>
Hi, Is there any way such that i can use ordered list to number the rows of a table?? Nikhil Hi, I'm having a basic problem with a HTML table. It displays exactly how I want on Firefox 3.5.15 but on Internet Explorer 8 is does not. Can anyone point out what I need to do to get this table displaying in IE as it does in Firefox? Below is my HTML table and I suspect IE 8 is ignoring 'rules = rows'; <?php echo '<TABLE bordercolor=#000000 cellspacing=0 cellpadding=10 border=0 rules=rows frame=box width="90%">'."\n"; echo '<tr>'; echo '<td><B><font size=1>Test Name</font></B></td><td><B><font size=1>Date</font></B></td><td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 1</font></td><td><font size=1>01/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 2</font></td><td><font size=1>02/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 3</font></td><td><font size=1>03/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 4</font></td><td><font size=1>04/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '<td><font size=1>Test Number 5</font></td><td><font size=1>05/01/2010</font></td>'; echo '</tr>'; echo '<tr>'; echo '</TABLE>'."\n"."\n"; ?> Thanks! Hi Can anyone solve this problem. Here is my 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>Hide/Show Test!</title> <style> .myclass1 { background-color:#CCCCCC; display:block; } .myclass2 { display:none; } </style> </head> <body> <script> function hideNshow(){ var e1=document.getElementById('A1C1_1'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } e1=document.getElementById('A1C1_2'); if(e1.className=="myclass1") { e1.className="myclass2"; } else { e1.className="myclass1"; } } </script> <!-- <input type="button" name="myBtn" value="Click Me!" onclick=" hideNshow();"/>--> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><a href="#" onclick=" hideNshow();">Row1/Cell1</a></td> <td >Row1/Cell2</td> <td>Row1/Cell3</td> </tr> <tr id="A1C1_1" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr id="A1C1_2" class="myclass2"> <td>Row2/Cell1</td> <td>Row2/Cell2</td> <td>Row2/Cell3</td> </tr> <tr> <td>Row3/Cell1</td> <td>Row3/Cell2</td> <td>Row3/Cell3</td> </tr> <tr> <td>Row4/Cell1</td> <td>Row4/Cell2</td> <td>Row4/Cell3</td> </tr> <tr> <td>Row5/Cell1</td> <td>Row5/Cell2</td> <td>Row5/Cell3</td> </tr> </table> </body> </html> It is working fine in IE. When I click the link It displays the hidden rows and hides when I click the link agian. But in Firefox it is giving error. It is adding empty rows. How to prevent that. Thanks in advance. Hi all I have attached a screenshot. I want to create table(shown in attachment) with many rows and coloumns(Kind of Xl Sheet) with scroll options. How to insert that table into normal HTML table with width="90%" Kindly resolve this issue. i have added dropdown list and associated label with it and i want to know the value for label and the value selected in dropdown list. How can I access both values inside javascript? can anybody help? I have a <select> drop down list. I have a label associated with this element. Here is the code; <select name="v" id="v" value="0" size="1"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <label for="v">No. required</label><br /> The problem is that when the user clicks on the text of the label, the value in the <select> list is changed back to 0. For example, the user selects 3 using the drop down list. Then if the user ever clicks on the label's text, this value returns to 0. How can I stop this from happening and maintain the initially diisplayed value of the <select> list as 0? Is there a way to dynamically create text in html/jsp based on a value the user chooses? I have the following code in a jsp and based on the value of the returntype that the user chooses. The value SSN: has to change to SSN/FEIN: depending on what is choosen in the return type drop down (note, the change has to be in the text and not the inputType field). Is there an easy way to do this? Here is the form code... <form action="CompareData" method="post"> <center> <table cellspacing="5" border="0"> <col width=450> <tr> <td align = "LEFT" colspan=2><b>Please enter the parameters below to retrieve the information:</b></td> </tr> </table> </center> <center> <table cellspacing="5" border="0"> <col width=200> <col width=100> <tr> <td align = "LEFT"><b>SSN:</b></td> <td><input type="text" name = "SSN" value="000000000" ></td> </tr> <tr> <td align = "LEFT"><b>End Year:</b></td> <td><input type="text" name = "ENDYEAR" value="2007" ></td> </tr> <tr> <td align = "LEFT"><b>Num of Years:</b></td> <td><input type="text" name = "NUMYEARS" value="2" ></td> </tr> <tr> <td align = "LEFT"><b>Return Type:</b></td> <td> <select name="ReturnTypeDropDown" > <option value="WI">WI</option> <option value="IRS">IRS</option> <option value="Informational">Informational</option> </select> </td> </tr> <tr> <td><input type="hidden" name="RETURNTYPE" value="" ></td> <td><input type="button" value="Retrieve" onClick="validate(this.form)"></td> </tr> </table> </center> </form> Hi, I'm a HTML newbie (have some programming experience though), so please forgive me if my question is maybe unclear or naive. I've managed to build a newsletter that displays nicely in the most-used webmail clients and offline clients. For personalization I can add form fields (like: name) to the html code that graphicmail will fill with the indivual recipient's data (like: Bob) on sending out the newsletter. To add an "Unsubscribe" link to the newsletter, graphicmail recommends to insert this code: <DIV><LABEL class=FormField data="Unsubscribe">Unubscribe</LABEL></DIV> This results in a simple: Unsubscribe text in the newsletter. If the reader clicks on it, the unsubscribe webpage is opened. I would like to achive the same functionality but with something different than the LABEL tag, since this plain text "Unsubscribe" doesn't fit the design of the newsletter. Ideally I'd like to be able to use an image that when clicked provides the same functionality as the label tab does. Sorry for the confused description. Thanks for your help. Mark 2 Quick questions: 1) Is it considered good, poor, or indifferent programming style to implicitly connect labels with other form tags. For instance, is one of these preferable to the other? Code: <label for="username">Username</label> <input type="text" name="username" id="username" /> <label>Username: <input type="text" name="username" id="username" /></label> 2) Is it good or bad programming style to have the name and id of a tag the same? For instance, in the example above, the input object has an id and name of "username". Is this considered ok? Tahnks for all the help~ Hi, I know the label element is for associating a text label with a control, and that when you click it the control gets focus. But is that its only purpose? Is it supposed to be used for describing a more general semantic relationship. In particular can/should/is it intended to be used to associate key value pairs to describe a semantic relationship sort of like <dt> <dd>? For example say I have a listing of key values pairs from say a config file. Should I do this: <label for="val0">screenheight:</label><span id="val0">7560</span> I dont know, maybe I should use <dt> <dd> and re-style with CSS? Or maybe thats what the ":" is for(!) and I dont need to express this in HTML (Thinking about the boundary between presentation and semantics makes my crazy, its very fuzzy in my opinion). Any thoughts appreciated. Thanks. How do I place a label for a radio button above the radio button? Good day guy's. Im very new to html programming and scripting, but I was wondering if it would be possabe to insurt a dynamic label field in you body where to content must be fetch from a notepad or wordpad ( /docs/someting.txt ) Thanks Hey can someone help me and tell me how i can make like a paragraph in boxes that are side by side with borders please. Thank you. |
|||||||