[Cialug] Web Work, HTML Question

[Tim Wilson]

HTML Tables for non-tabular data?  Nooooo! :)

Tables do make it much easier to position stuff, but there are a lot of
problems with them too.  They're not "accessibility" friendly, and they can
get unreadable quickly.  I've seen people put tables within tables, within
tables .... far too deep to be readable.  If at all possible, DIV and SPAN
and P are much more preferred.  Tables got over-used, and they're becoming
the bane of web pages, even though a lot of places (Yahoo, for example)
still use them.  Unfortunately, a lot of examples found on the internet
still use tables.

I'd like to make one other suggestion.  Do something like the following:
<label>Date:&nbsp;<input type="text" name="impDate" size="10"></label>

One, it ties the text to the input box.  If the user clicks the text, the
input box should get focus (on a checkbox, clicking the text will actually
toggle the checkbox).  Two, if someone is using a screen reader, it will
announce the text as a label to the input box.  At least, that's my
understanding.  I've not actually seen a screen reader for the visually
impaired.  But accessibility does seem to be a growing need.


On Fri, Dec 18, 2009 at 4:36 PM, Afan Pasalic <afan at afan.net> wrote:

> is this:
>
>
> <table width="100%" border="1" cellspacing="0" cellpadding="0">
>     <tr>
>           <td align="center" colspan="3">
>                <select name="system">
>                    <option value="Option1">Option 1</option>
>                    <option value="Option2">Option 2</option>
>                </select>
>               <input type='button' value='Remind' name='bRemind'
> onclick='vbscript:MultiFunctions "Remind"'>
>               <input type='button' value='Make Statement'
> name='bMakeStatement' onclick='vbscript:MultiFunctions
> "MakeStatement"'>
>           </td>
>     </tr>
>     <tr>
>           <td>Date:&nbsp<input type="text" name="impDate" size="10"></td>
>          <td>Start Time:&nbsp<input type="text" name="impStart"
> size="10"></td>
>          <td>End Time:&nbsp<input type="text" name="impStop"
> size="10"></td>
>      </tr>
> </table>
>
>
>
>
> or this:
>
>
>
> <table width="100%" border="1" cellspacing="0" cellpadding="0">
>     <tr>
>           <td align="center" colspan="2">
>                <select name="system">
>                    <option value="Option1">Option 1</option>
>                    <option value="Option2">Option 2</option>
>                </select>
>               <input type='button' value='Remind' name='bRemind'
> onclick='vbscript:MultiFunctions "Remind"'>
>               <input type='button' value='Make Statement'
> name='bMakeStatement' onclick='vbscript:MultiFunctions
> "MakeStatement"'>
>           </td>
>     </tr>
>     <tr>
>          <td align="left" colspan="3">Date:&nbsp<input type="text"
> name="impDate" size="10"></td>
>             </tr>
>            <tr>
>           <td>Start Time:&nbsp<input type="text" name="impStart"
> size="10"></td>
>          <td>End Time:&nbsp<input type="text" name="impStop"
> size="10"></td>
>      </tr>
> </table>
>
>
> what are you looking for?
>
>
> afan
>
>
>
>
>
>
> Todd Walton wrote:
> > <table width="100%" border="1" cellspacing="0" cellpadding="0">
> >      <tr>
> >           <td><p align="center">
> >                <select name="system">
> >                     <option value="Option1">Option 1</option>
> >                     <option value="Option2">Option 2</option>
> >                 </select>
> >                <input type='button' value='Remind' name='bRemind'
> > onclick='vbscript:MultiFunctions "Remind"'>
> >                <input type='button' value='Make Statement'
> > name='bMakeStatement' onclick='vbscript:MultiFunctions
> > "MakeStatement"'>
> >           </p></td>
> >      </tr>
> >      <tr>
> >           <p align='center'>
> >           <td>Date:&nbsp<input type="text" name="impDate" size="10"></td>
> >           <td>Start Time:&nbsp<input type="text" name="impStart"
> size="10"></td>
> >           <td>End Time:&nbsp<input type="text" name="impStop"
> size="10"></td>
> >           </p>
> >      </tr>
> > </table>
> >
> > This HTML creates a table that doesn't look like I want it to.  The
> > drop-down selector and the Remind and MakeStatement buttons are only
> > 50% of screen width, as is the cell with the impDate input box.  The
> > right half of the screen has the impStart and impStop input boxes.
> >
> > |     Option1 [Remind] [MakeStatement]     |
> >                                                |
> > |     Date: [         ]                                     |
> > Start Time: [          ]    Stop Time: [            ]     |
> >
> > Can someone tell me why this is?  What can I change to make the drop
> > down and the two buttons center across the entire page, instead of
> > just half of it?
> >
> > --
> > Todd
> > _______________________________________________
> > Cialug mailing list
> > Cialug at cialug.org
> > http://cialug.org/mailman/listinfo/cialug
> >
> _______________________________________________
> Cialug mailing list
> Cialug at cialug.org
> http://cialug.org/mailman/listinfo/cialug
>



-- 
Tim
Required reading: http://bccplease.com/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://cialug.org/pipermail/cialug/attachments/20091218/857e51f3/attachment.htm