I'm new to this site, so I will try and explain my situation as clearly as I can!
I am currently trying to create a HTML form with 4 input fields and one textarea contained within a table.
I am trying to set my textarea to cover 2 rows within the table so I've used the colspan tag. Though this doesn't seem to be working (see picture) and when I change the textarea height within my CSS file, the input fields are being pushed further over to the right and I'm unsure why.
My HTML code for the form:
<table style='width:100%'>
<tr>
<th><input type='text' name='name' required placeholder='Name' />
<th>
<th><input type='text' name='email' required placeholder='Email' /></th>
</tr>
<tr>
<th><input type='text' name='mobile' required placeholder='Mobile'/>
<th>
<th><input type='text' name='subject' required placeholder='subject' /></th>
</tr>
<tr>
<th colspan='2'> <textarea></textarea></th>
</tr>
</table>
My actual outcome:
See Screenshot
You have accidentally created a new table head cell (<th> on line 4) instead of closing the first (</th>).
This should hilight the issue: https://jsfiddle.net/odvnLy52/1/
With your HTML the browser will create a table with 3 columns, not 2. The last cell will span 2 of those 3 columns.
This is an example with the HTML fixed: https://jsfiddle.net/odvnLy52/
Related
Take a look at this image.
I have a table containing input. Each input is defined by a column header cell and a row header cell. How would you ensure that blind users know what to type in each input field?
Let us use this following simplified html table as example:
<table border="1">
<tr>
<th></th>
<th>Income</th>
<th>Change</th>
</tr>
<tr>
<th>Personal income</th>
<td><input type="number" value="0"></td>
<td><input type="number" value="0"></td>
</tr>
<tr>
<th>Company earnings</th>
<td><input type="number" value="0"></td>
<td><input type="number" value="0"></td>
</tr>
</table>
https://jsfiddle.net/vzr6rmzx/
The answer is described by W3 in example 3:
https://www.w3.org/WAI/tutorials/forms/grouping/
Basically you need to use fieldset, legends and labels that are hidden. The example uses a class that hides labels but i suggest you instead consider aria-label tag which are only read by screen readers (and other assistive technologies) but are visually hidden.
This code I have written will generate lines in between every row and column. Can you please tell me how can I remove some lines in between columns while keeping others (as shown in the last image).
<form action="method="POST">
<table border="1" style="width:400px">
<tr>
<td>January:</td>
<td>$20</td>
<td>february:</td>
<td>$30</td>
<td>March:</td>
<td>$60</td>
</tr>
<tr>
<td>April:</td>
<td>$20</td>
<td>May:</td>
<td>$30</td>
<td>June:</td>
<td>$60</td>
</tr>
<tr>
<td>Description:</td>
<td colspan="5"><input type="text" name="data" value="some data" size="44"/></td>
</tr>
</table>
<input type="submit" name="updatebutton" value="Update" /></form>
You can't. That's just how tables work.
Alternately you can remove the borders from the table, put a DIV in each cell and selectively style the borders of the DIVs.
Can anybody tell me why my internal rows are not coming inside the td.
<tr id="group_1_id">
<th>Group 1</th>
<td>
<tr id="1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
</td>
</tr>
The 3 table rows comes outside the parent tr. Though they are defined inside the td of my parent tr.
Thanks in advance
I would say that your HTML is not correct. If you want a header section, then use <thead> or <tbody> element, not <th>. I believe your problems emerged from the fact that you have used <th> instead of <thead>.
You may want to use a validator to check whether your HTML is correct. Upload your page to http://validator.w3.org for example, and correct the errors it shows you.
Also check the specification (for example on www.whatwg.org) because I suppose that you wanted to create more than one header section in a table. A table may have not more than one <thead>, not more than one <tfoot>, and any number of <tbody> elements.
Oh, you have just reedited the question, but the problem is the same :)
A <tr> element cannot be placed inside a <td> or <th>. When that code is parsed, a nested table is automagically created, so the real HTML looks like this:
<tr id="group_1_id">
<th>Group 1</th>
<td>
<table>
<tbody>
<tr id="1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
<tr id="2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
<tr id="3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
</tbody>
</table>
</td>
</tr>
Here is a link my example of the misaligned table rows
Click preview in the upper top left corner of the JS Bin menu bar to see this example in the works. You can see the top 2 borders of the table cells with Email and an input field in them are a bit lower than the top 2 borders of the 2 table cells to the left of them (Username and an input field).
Why is this happening?
Also I am finding I have to write rowspan="4" for <th> and <td> elements in the second element to make them span the 3 rows beside it. Why do I have to do that? It makes no sense if there are only 3 rows I have to clear. It's as if there is a mysterious hidden row somewhere.
UPDATE with example answer:
I implemented the answer in this example. As you can see, there is perfect alignment between all table cells.
right... easy peasy...
basically, the second row needs to have 4 cells in it, the username and input cells AND the email and input cells...
the username and input cells need to have rowspan="3" and then the NEXT two rows need to be password and new password with their input fields.
code:
<html>
<head>
</head>
<body>
<table border="1">
<tbody>
<tr>
<th colspan="4" rowspan="1">
<h3>Profile Settings</h3>
</th>
</tr>
<tr>
<th rowspan="3">
<label for="">USERNAME:</label>
</th>
<td rowspan="3">
<input type="text">
</td>
<th>
<label for="">Email:</label>
</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>
<label for="">Password:</label>
</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<th>
<label for="">New Password:</label>
</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="save">
</td>
</tr>
</tbody>
</table>
</body>
</html>
Your first row is has 1 td with a colspan of 4, but your second row is 2 td's both with a normal colspan?
Your mark up is flawed, fix this first.
What is the end result supposed to look like?
The way it looks now?
I'm designing a form: image and code below. There are about 30 more sections like this, and I just need the inputs (right) to align to the list (center). What's the best way to do this? Can I just alter my table HTML to make it work?
Layout http://img85.imageshack.us/img85/2199/screenshot20091227at719.png
<table border="1">
<thead>
<tr>
<th>Category</th>
<th>Risk Factors</th>
<th>Hours per Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>Repetition</strong>
<p>Finger, Wrist, Elbow, Shoulder or Neck Motions</p>
</td>
<td>
<ol>
<li><strong>Identical or Similar Motions Performed Every Few Seconds</strong><br />Motions or motion patterns that are repeated every 15 seconds or les. (Keyboard us is scored below as a separate risk factor.)</li>
<li><strong>Insensitive Keying</strong><br />Scored Separately from other repetitive tasks in the repetition category and includes steady pace as in data entry.</li>
<li><strong>Intermittent Keying</strong><br />Scored Separately from other repetitive tasks. Keyboard or other input activity is regularly alternated with other activities for 50 to 75 percent of the work.</li>
</ol>
</td>
<td>
<input autocomplete="off" size="2" type="text" name="a_1" id="a_1" class="text-input" value="<?php print $this->validation->a_1?>"/>
<input autocomplete="off" size="2" type="text" name="a_2" id="a_2" class="text-input" value="<?php print $this->validation->a_2?>"/>
<input autocomplete="off" size="2" type="text" name="a_3" id="a_3" class="text-input" value="<?php print $this->validation->a_3?>"/>
</td>
</tr>
</tbody>
</table>
I think you will need to use distinct rows in the table for each line. For the first column, you can use "rowspan=3" to have that column flow over all 3 rows.
You can break that down into a 4x3 table, with the left side having just 2 rows, the second having a rowspan=3. That would probably end up looking the way you wanted.
To get your horizontal dividers in there, you may want to use colgroup to group your columns; this allows you to attach borders. By the same token, you can format the white row as a THEAD and the grey part as a TBODY.