I've got a form inside a table that has some Javascript validation. The table tag is
<table style="padding-left:70px" align="left" cellpadding="10">
and a given row looks like this:
<tr id="email_row">
<td align="right" valign="top">
<label for="email">Email: *</label>
</td>
<td class="field_cell" valign="top">
<input type="text" name="email" maxlength="80" size="30"><span class="error_field"></span>
</td>
</tr>
If the user hits submit without this or other fields filled (or filled correctly), the span gets filled with an error message like "Invalid" or "Required." Unfortunately, doing this shifts the whole tbody over do the left (even though it is aligned left). Any suggestions?
FYI, I can only reproduce this problem in Chrome. Firefox and IE are working just fine.
Fixed!
The problem was that I had a row of text in the table with colspan=2 that made the width of the table greater than the width of any of the other rows.
Adding text to the <span> elements increased the width of the second column, which in turn caused the first column to become smaller (since its cells were aligned to the right).
Related
I have this issue. I have written this HTML code, but I am unable to align between the question, yes/no buttons and text area box. My question has huge space from yes/no buttons, but when I drag the text area box and making it smaller, the question and yes/no buttons come closer as I wanted it to look. How can I fix this issue so my question is next to the yes/no buttons and box is underneath and doesn't move when I drag to make it bigger or smaller?
<table cellspacing="2" cellpadding="2">
<tr>
<td class="data_yy">
<input type="radio" name="jack" id="jack" value="Y" onclick="hideShowJacks('Y');"/><label>Yes</label>
<input type="radio" name="jack" id="jack" value="N" checked onclick="hideShowJacks('N');"/><label>No</label>
</td>
<td class="data_xx"> Are are taking English class in fall?</td>
</tr>
<tr>
<td>
<textarea cols="120" rows="5" maxLenghth="20" class="resizable" name="jack" id="jack"> </textarea>
<div class="plaintext" style="justify:left" id="jack"> </div>
</td>
</tr>
</table>
So, this is a table, and you have two cells in the first row, and only one cell in the second row. You'll want that second cell to have colspan="2" as a property...
<td colspan="2">
And then, for the second part of your issue ("so my question [text] is next to the yes/no buttons"), you'll want to change the first yes/no cell to have <nobr> so it doesn't linebreak, and also set width="1"...
<td class="data_yy" width="1">
Made a quick working demo.
Does this look right?
I have a table which contains a 'Select All' checkbox as the first column in the header row.
The problem is column headers make perfectly sense when they represent the data type of their columns but the content of this th is just a checkbox with a "Select All" label.
As it is now, it sets a relationship with all the checkboxes in its column, we're basically saying that all the checkboxes are someway related to "Select All".
Is there any way to markup a 'Select All' checkbox in the table header so the relationship in terms of labeling is broken with all the checkboxes below it?
I've read that changing the th in the table header that houses the 'Select All' checkbox to a td will solve this (and it does), but was curious if there's another solution that wouldn't require me to affect the markup of the header.
Screen reader reads as follows for the checkbox table header and table cell:
This is a table of Manage Courses. table with 3 rows and 6 columns
row 1 Select all items in this table column 1
Select all items in this table
checkbox not checked
row2 Select all items in this table column 1
Dev ILT 1
checkbox not checked
As you can see announcing the select checkbox for the course 'Dev ILT 1' as 'Select all items in this table' is misleading
Code example. This is just the header and body section. Not all rows or headers are listed in the code example as it's not relevant
<thead>
<tr class="thead-main">
<th align="center" scope="col" valign="top" class="colheadcheckbox">
<input type="checkbox" aria-label="Select all items in this table" onclick="SelectAllCheckbox.CheckUncheckAll(this, 'selectedID')" id="SelectAll">
<label for="SelectAll"><span class="hidden">Select all items in this table.</span></label>
</th>
<th scope="col" align="left" valign="middle" class="colhead">
<a href="?reverseSortBy=Name" title="Sort this column by descending order" class="sortdown">
<span> Name </span>
<img src="/geonext/images/skins/simple/schemes/dalmatian/indicator_sort_up.png" width="9" height="9" border="0" alt="This column is sorted by ascending order" title="This column is sorted by ascending order"> </a>
</th>
<th scope="col" align="left" valign="top" class="colhead">
Course Code
</th>
<th scope="col" align="left" valign="top" class="colhead">
Type
</th>
</tr>
</thead>
<tbody>
<tr class="first odd">
<td align="center" valign="middle" class="">
<input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID2" value="2">
<label for="selectedID2"><span class="hidden"> 2</span></label>
</td>
<td class="sorted" align="Left">
<label for="selectedID2">Dev ILT 1
</label>
</td>
<td align="Left"> ILT1 </td>
<td align="Left"> Instructor Led </td>
</tr>
<tr class="even">
<td align="center" valign="middle" class="">
<input type="checkbox" class="checkbox with-font" name="selectedID" id="selectedID1" value="1">
<label for="selectedID1"><span class="hidden"> 1</span> </label>
</td>
<td class="sorted" align="Left">
<label for="selectedID22507408476">Dev UDT 1</label>
</td>
<td align="Left"> UDT1 </td>
<td align="Left"> User Defined Task </td>
</tr> '
</tbody>
I'm having a hard time understanding how 'Select All' is a valid heading. The heading is meant to provide context for the data in the associated cells. Used properly, a screenreader will read out the heading as you navigate into the column/row.
If someone navigates from a cell in the second column into a cell in the first, it would theoretically read
"[h1]Select All checkbox unchecked[/h1] [td]input-label checkbox unchecked[td]"
(square bracket content added for clarity - if you are navigating from one column to the next, the column header is read out before the data for each new column you navigate into)
This hardly provides context as to what the checkbox is. The 'Select All' checkbox should more likely be used as the last element or even a footer element rather than a heading.
It's hard to fully understand without a code example, but I would suggest never including functional elements in a table heading. It's intended for phrasing content.
Kind of a side issue but hopefully if you're using <th> for all your other column headings, you're also using the scope= property too. Don't force the screen reader to guess whether your <th> is a row header or column header. Valid values for scope are 'row', 'col', 'rowgroup', and 'colgroup'. (The 'group' names are for spanned rows and columns.)
It sounds like you'd like a scope=none, analogous to role=none (in ARIA 1.1). There isn't such a thing. If a cell in a table is not supposed to be a header, then <th> shouldn't be used. Making it a <td> is the proper way to mark it up.
Now, you might be able to fake it if you use a header= on the <td> elements in your first column to disassociate them from their column header, but I haven't tried that. I'm not sure what happens if you have a properly marked <th> and then a <td header='foo'> below it, where 'foo' is another object on your page. The screen reader might still read the column header. It might be worth a try, though.
As you spotted well, the first cell is not a header, change it to a td
<td align="center" valign="top" class="colheadcheckbox">
<input type="checkbox" aria-label="Select all items in this table"
title="Select all items in this table" onclick="..." />
</td>
There is no use of using aria-label when you already provide a label
You may use the title attribute to give an hint for non screenreader users who want understand what is this checkbox; title is correctly supported by screenreaders when used on control elements.
You could also consider a two rows solution using rowspan=2 attribute for other columns:
<tr>
<th scope="col">Select</th><th rowspan="2" scope="col">... </th>
</tr><tr>
<td><label><input type="checkbox" onclick="..." />All</label></td>
</tr>
Making the "Select" and "All" text visible will make the things clearer.
You also should reconsider the label of your other checkboxes as 1, 2, 3, ... are not very descriptive.
<input type="checkbox" id="selectedID1" value="1" title="Select Dev UDT 1" />
I was maintaining a very old web project and found issues with the alignment. It seems to be very simple HTML or CSS issues, but I couldn't figure it out.
The app generates two tables in the code behind(populates the contents of the second table) and stacks them up like this:
<table border="1">
<tr>
<td width="70%" align="center">Description</td>
<td width='75px'>Header1</td>
<td width='75px'>Header2</td>
<td width='75px'>Header3</td>
</tr>
</table>
<table border="1">
<tr>
<td width='70%'>
<input type="text" name="first_name" value="Software" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="2000" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="1" style="width:100%" />
</td>
<td width='75px'>
<input type="text" value="2" style="width:100%" />
</td>
</tr>
</table>
The first table serves as the header while the second table contains the detail rows.So each header should align properly with its content. But when I resize the window, the alignment is messed up.
I just wondering why it happens as the tables follow the same structure. The only difference is the second table uses some input elements instead of plain text.
That's how tables work. The content of the first table is too big to shrink the table cells as much as the 2nd table. A quick check is to change the text in the first table, see this fiddle for instance: https://jsfiddle.net/q4zzvcra/
Also, td width="75px" needs to be td width="75" ditch the px
In html 5 width is not supported anymore for td, use css instead, see this post: HTML 'td' width and height
I tried this out at https://jsfiddle.net/9p37p2en/.
The only difference is the second table uses some input elements instead of plain text.
And that's exactly your problem. The text nodes will never shrink beyond the minimum width of the longest word, so unless you get rid of the overflow in your table, your table cell won't shrink smaller than that. An text INPUT field however can shrink until just a few px.
Also:
Absolute widths in table cells are ignored if in that same table there are cells with relative width. You can safely remove the width=75px, it doesn't do anything at all.
You should not use td's width and align properties. Use its style or class property instead together with the correct CSS.
I have a table with a structure like this:
<tr>
<td class="data">
<input type="number" step="0.5" min="0" name="data" value="1" />
<div class="increment-decrement">
<a class="increment-button"></a>
<a class="decrement-button"></a>
/div>
</td>
</tr>
64 row, 13 cell each. I have hover effect on every <tr>, that gives the row highlight and another hover on every <td> that sets the inner div's display property to inline-block.
When I mouse over in Internet Explorer (even in IE11) the rows and cells hover effect lags like hell. In Chrome it is really smooth. If I remove the input fields the performance is okay, but I need those.
I am trying to put a status image (showing a tick if email is correct or cross if not) next to the email field in my form.
The problem is my registration form is using the table method , so the image is not showing next to the field but below it. Can anyone help me out here?
This is what I tried to do but still not work the way I want it to.
<table width="500" border="0">
<tr><td width="210" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="images/bad.png" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
The issue is because the <td> has not enough space to fit in both text field and the image.
either add more width to the <table> or the 2nd <td> will solve the problem.
Since your image is of a check mark and an x, just use the unicode equivalents:
✔ = ✔
✘ = ✘
And simply get rid of the image altogether.
All it needs right now is space to fit in.
<table width="650px" border="0">
<tr><td width="210px" height="45">Email:</td><td>
<input type="text" size="40" name="userEmail" id="userEmail" onkeyup="checkEmail(this.value);" onblur="checkEmail(this.value);" maxlength="60" />
**<img id="status" src="https://www.google.ca/images/srpr/logo4w.png" width="125px" height="50px" style="margin-left:5px; vertical-align:middle;" alt="Status" /></td></tr>**
</table>
Take a look at this fiddle, what changed is the size of the table containing the column. You may either reduce the input width or let it more space by increasing the table width.