[Cialug] Web Work, HTML Question

[Kenneth Younger]

Unless you are formatting content for an HTML email - tables are still the
best supported method for that medium. Though, with that form in there I
would hope you aren't using this for an email.

-Kenny

On Fri, Dec 18, 2009 at 6:48 PM, Tim Wilson <tim_linux at wilson-home.com>wrote:

> 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/
>
> _______________________________________________
> Cialug mailing list
> Cialug at cialug.org
> http://cialug.org/mailman/listinfo/cialug
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://cialug.org/pipermail/cialug/attachments/20091218/e9e0eb06/attachment-0001.htm