WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: re: Table Haunts Me

for

Number of posts in this thread: 2 (In chronological order)

From: webmaster
Date: Thu, Jul 31 2003 11:10AM
Subject: re: Table Haunts Me
No previous message | Next message →

I think the bigger question is why is this thing setup the way it is?
colspan="85"?
Are you trying to incorrectly hardcode the width?

Also, why the use of <strong>? You're trying to make bold text. Ask yourself: "Should this be a heading?"
If it is presentation you're trying to achieve with <strong>, might I suggest CSS? <span style="font-weight: bold;">blah</span>


Since this is not tabular data, but rather a form, you should remake the whole thing.
Here's a start. Don't forget to label your form elements with their labels.
Use CSS to play with margin for each of these DIVs

<h1 align="center">TITLE</h1>


<div>TODAY'S DATE<br />
<input class="input" title="Today's Date" value="January 22, 2003"
name="TODAYS_DATE" type="text" />
</div>
<div>REQUESTED BY (Name) <br />
<input class="input" title="Enter Requestor's Name Here"
name="REQUESTED_BY" type="text" />
</div>
<div>DIVISION<br />
<input class="input" title="Enter Requestor's Division Here"
name="DIVISION" type="text" />
</div>
<div>EXTENSION <br />
<input class="input" title="Enter Requestor's Extension Here"
name="EXTENSION" type="text" />
</div>
<div>EMAIL<br />
<input class="input" title="Enter Requestor's Email Address Here"
name="Requestor_Email" type="text" />
</div>
<div>AUTHOR (BOOK) <br />
<input class="input" title="Enter Author Information Here"
name="BOOK_AUTHOR" type="text" />
</div>
<div>TITLE (BOOK OR JOURNAL) <br />
<input class="input" title="Enter Book or Journal Title "
name="BOOK_TITLE" type="text" />
</div>
<div>PUBLISHER <br />
<input class="input" title="Enter Article Publisher Here"
name="ARTICLE_PUBLISHER" type="text" />
</div>
<div>VOLUME<br />
<input class="input" title="Enter Publisher Here"
name="PUBLISHER" type="text" />
</div>
<div>YEAR <br />
<input class="input" title="Enter Year Published In Here"
name="YEAR" type="text" />
</div>
<div>EDITION <br />
<input class="input" title="Enter Edition Here" name="EDITION" type="text"
/>
</div>
<div>PRICE <br />
<input class="input" title="Enter Price Here" name="PRICE" type="text" />
</div>
<div>
<input title="Submit Request"
type="text" value="Submit Request" name="Submit" />
</div>



>> Every time I see this table I wonder why the colspan is designated so much
>>
>> larger than what it
>> actually is.

>> Is there a reason for a table to be coded in this manner? When I insert
>> the actual number of
>> columns in "colspan", the table looks the same.

>> Am so curious. Any ideas?

>> Here's the code:


>> <table title="Suggest a Title" cellspacing="0" width="90%" border="0">
>> <tbody>
>> <tr>
>> <td title="Title" colspan="85">
>> <h1 align="center">TITLE</h1>
>> </td>
>> </tr>

>> <tr>
>> <td title="Today's Date" colspan="85"><span
>> class="smaller">&#160;<strong>TODAY'S DATE</strong></span><br />
>> <input class="input" title="Today's Date" value="January 22, 2003"
>> name="TODAYS_DATE" /></td>
>> </tr>

>> <tr>
>> <td class="smaller" title="Requestor's Name"
>> colspan="36"><strong>REQUESTED
>> BY (Name)</strong><br />
>> <input class="input" title="Enter Requestor's Name Here" size="22"
>> name="REQUESTED_BY" /></td>
>> <td class="smaller" title="Division"
>> colspan="12"><strong>DIVISION</strong><br />
>> <input class="input" title="Enter Requestor's Division Here" size="10"
>> name="DIVISION" /></td>
>> <td class="smaller" title="Extension"
>> colspan="12"><strong>EXTENSION</strong><br />
>> <input class="input" title="Enter Requestor's Extension Here" size="10"
>> name="EXTENSION" /></td>
>> <td class="smaller" title="Email" colspan="24"><strong>EMAIL</strong><br
>> />
>> <input class="input" title="Enter Requestor's Email Address Here"
>> size="23"
>> name="Requestor_Email" /></td>
>> </tr>

>> <tr>
>> <td class="smaller" title="Enter Author" colspan="85"><strong>AUTHOR
>> (BOOK)</strong><br />
>> <input class="input" title="Enter Author Information Here" size="70"
>> name="BOOK_AUTHOR" /></td>
>> </tr>

>> <tr>
>> <td class="smaller" title="Enter Book or Journal Title"
>> colspan="85"><strong>TITLE (BOOK OR JOURNAL)</strong><br />
>> <input class="input" title="Enter Book or Journal Title " size="70" >> name="BOOK_TITLE" /></td>
>> </tr>

>> <tr>
>> <td class="smaller" title="Publisher"
>> colspan="85"><strong>PUBLISHER</strong><br />
>> <input class="input" title="Enter Article Publisher Here" size="70" >> name="ARTICLE_PUBLISHER" /></td>
>> </tr>

>> <tr>
>> <td class="smaller" title="Publisher"
>> colspan="42"><strong>VOLUME</strong><br />
>> <input class="input" title="Enter Publisher Here" size="10"
>> name="PUBLISHER" /></td>
>> <td class="smaller" title="Year Published In"
>> colspan="14"><strong>YEAR</strong><br />
>> <input class="input" title="Enter Year Published In Here" size="10" >> name="YEAR" /></td>
>> <td class="smaller" title="Edition"
>> colspan="14"><strong>EDITION</strong><br />
>> <input class="input" title="Enter Edition Here" size="10" name="EDITION"
>> /></td>
>> <td class="smaller" title="Price" colspan="14"><strong>PRICE</strong><br
>> />
>> <input class="input" title="Enter Price Here" size="10" name="PRICE"
>> /></td>
>> </tr>

>> <tr>
>> <td title="SubmitButton" colspan="85"><input title="Submit Request" >> type="submit" value="Submit Request" name="Submit" /> </td>
>> </tr>
>> </table>




>> Laurie Davis-Covin, Web Specialist/Writer
>> National Institute of Standards and Technology
>> 100 Bureau Drive
>> Admin. Building, Room E 220
>> Gaithersburg, MD 20899
>> Ph: 301-975-8027

























>> ----
>> To subscribe, unsubscribe, or view list archives,
>> visit http://www.webaim.org/discussion/








Karl Groves

AOL, MSN, YAHOO Users IM me at - "KarlCore"

Visit my favorite places:

EightNineThree Records & Duplication
http://www.eightninethree.com

Baltimore Punk & Hardcore
http://www.baltimorepunk.com

PunkRockShows
http://www.punkrockshows.com

Theory X Design
http://www.theoryxdesign.com

United States Neapolitan Mastiff Club's Rescue Program
http://www.neorescue.org



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/

From: Laurie Davis-Covin
Date: Thu, Jul 31 2003 1:09PM
Subject: re: Table Haunts Me
← Previous message | No next message

You're right, of course. But that's what I was asking. Why was the form
set up like it is.
A programmer, no longer here, set them up that way.
I also agree the form is not accessible.

I was simply trying to discover if there was something I was overlooking
with the colspan="85",
colspan="21", etc. thing.

Thanks for responding-- I do appreciate it.




At 01:03 PM 7/31/2003 -0400, you wrote:
>I think the bigger question is why is this thing setup the way it is?
>colspan="85"?
>Are you trying to incorrectly hardcode the width?
>
>Also, why the use of <strong>? You're trying to make bold text. Ask
>yourself: "Should this be a heading?"
>If it is presentation you're trying to achieve with <strong>, might I
>suggest CSS? <span style="font-weight: bold;">blah</span>
>
>
>Since this is not tabular data, but rather a form, you should remake the
>whole thing.
>Here's a start. Don't forget to label your form elements with their labels.
>Use CSS to play with margin for each of these DIVs
>
><h1 align="center">TITLE</h1>
>
>
><div>TODAY'S DATE<br />
><input class="input" title="Today's Date" value="January 22, 2003"
>name="TODAYS_DATE" type="text" />
></div>
><div>REQUESTED BY (Name) <br />
> <input class="input" title="Enter Requestor's Name Here"
>name="REQUESTED_BY" type="text" />
></div>
><div>DIVISION<br />
> <input class="input" title="Enter Requestor's Division Here"
>name="DIVISION" type="text" />
></div>
><div>EXTENSION <br />
> <input class="input" title="Enter Requestor's Extension Here"
>name="EXTENSION" type="text" />
></div>
><div>EMAIL<br />
> <input class="input" title="Enter Requestor's Email Address Here"
>name="Requestor_Email" type="text" />
></div>
><div>AUTHOR (BOOK) <br />
> <input class="input" title="Enter Author Information Here"
>name="BOOK_AUTHOR" type="text" />
></div>
><div>TITLE (BOOK OR JOURNAL) <br />
> <input class="input" title="Enter Book or Journal Title "
>name="BOOK_TITLE" type="text" />
></div>
><div>PUBLISHER <br />
> <input class="input" title="Enter Article Publisher Here"
>name="ARTICLE_PUBLISHER" type="text" />
></div>
><div>VOLUME<br />
> <input class="input" title="Enter Publisher Here"
>name="PUBLISHER" type="text" />
></div>
><div>YEAR <br />
> <input class="input" title="Enter Year Published In Here"
>name="YEAR" type="text" />
></div>
><div>EDITION <br />
> <input class="input" title="Enter Edition Here" name="EDITION" type="text"
>/>
></div>
><div>PRICE <br />
> <input class="input" title="Enter Price Here" name="PRICE" type="text" />
></div>
><div>
> <input title="Submit Request"
>type="text" value="Submit Request" name="Submit" />
></div>
>
>
>
> >> Every time I see this table I wonder why the colspan is designated
> so much
> >>
> >> larger than what it
> >> actually is.
>
> >> Is there a reason for a table to be coded in this manner? When I
> insert
> >> the actual number of
> >> columns in "colspan", the table looks the same.
>
> >> Am so curious. Any ideas?
>
> >> Here's the code:
>
>
> >> <table title="Suggest a Title" cellspacing="0" width="90%" border="0">
> >> <tbody>
> >> <tr>
> >> <td title="Title" colspan="85">
> >> <h1 align="center">TITLE</h1>
> >> </td>
> >> </tr>
>
> >> <tr>
> >> <td title="Today's Date" colspan="85"><span
> >> class="smaller">&#160;<strong>TODAY'S DATE</strong></span><br />
> >> <input class="input" title="Today's Date" value="January 22, 2003"
> >> name="TODAYS_DATE" /></td>
> >> </tr>
>
> >> <tr>
> >> <td class="smaller" title="Requestor's Name"
> >> colspan="36"><strong>REQUESTED
> >> BY (Name)</strong><br />
> >> <input class="input" title="Enter Requestor's Name Here" size="22"
> >> name="REQUESTED_BY" /></td>
> >> <td class="smaller" title="Division"
> >> colspan="12"><strong>DIVISION</strong><br />
> >> <input class="input" title="Enter Requestor's Division Here" size="10"
> >> name="DIVISION" /></td>
> >> <td class="smaller" title="Extension"
> >> colspan="12"><strong>EXTENSION</strong><br />
> >> <input class="input" title="Enter Requestor's Extension Here"
> size="10"
> >> name="EXTENSION" /></td>
> >> <td class="smaller" title="Email"
> colspan="24"><strong>EMAIL</strong><br
> >> />
> >> <input class="input" title="Enter Requestor's Email Address Here"
> >> size="23"
> >> name="Requestor_Email" /></td>
> >> </tr>
>
> >> <tr>
> >> <td class="smaller" title="Enter Author" colspan="85"><strong>AUTHOR
> >> (BOOK)</strong><br />
> >> <input class="input" title="Enter Author Information Here" size="70"
> >> name="BOOK_AUTHOR" /></td>
> >> </tr>
>
> >> <tr>
> >> <td class="smaller" title="Enter Book or Journal Title"
> >> colspan="85"><strong>TITLE (BOOK OR JOURNAL)</strong><br />
> >> <input class="input" title="Enter Book or Journal Title "
> size="70" >> name="BOOK_TITLE" /></td>
> >> </tr>
>
> >> <tr>
> >> <td class="smaller" title="Publisher"
> >> colspan="85"><strong>PUBLISHER</strong><br />
> >> <input class="input" title="Enter Article Publisher Here"
> size="70" >> name="ARTICLE_PUBLISHER" /></td>
> >> </tr>
>
> >> <tr>
> >> <td class="smaller" title="Publisher"
> >> colspan="42"><strong>VOLUME</strong><br />
> >> <input class="input" title="Enter Publisher Here" size="10"
> >> name="PUBLISHER" /></td>
> >> <td class="smaller" title="Year Published In"
> >> colspan="14"><strong>YEAR</strong><br />
> >> <input class="input" title="Enter Year Published In Here"
> size="10" >> name="YEAR" /></td>
> >> <td class="smaller" title="Edition"
> >> colspan="14"><strong>EDITION</strong><br />
> >> <input class="input" title="Enter Edition Here" size="10"
> name="EDITION"
> >> /></td>
> >> <td class="smaller" title="Price"
> colspan="14"><strong>PRICE</strong><br
> >> />
> >> <input class="input" title="Enter Price Here" size="10" name="PRICE"
> >> /></td>
> >> </tr>
>
> >> <tr>
> >> <td title="SubmitButton" colspan="85"><input title="Submit
> Request" >> type="submit" value="Submit Request" name="Submit" /> </td>
> >> </tr>
> >> </table>
>
>
>
>
> >> Laurie Davis-Covin, Web Specialist/Writer
> >> National Institute of Standards and Technology
> >> 100 Bureau Drive
> >> Admin. Building, Room E 220
> >> Gaithersburg, MD 20899
> >> Ph: 301-975-8027
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> >> ----
> >> To subscribe, unsubscribe, or view list archives,
> >> visit http://www.webaim.org/discussion/
>
>
>
>
>
>
>
>
>Karl Groves
>
>AOL, MSN, YAHOO Users IM me at - "KarlCore"
>
>Visit my favorite places:
>
>EightNineThree Records & Duplication
>http://www.eightninethree.com
>
>Baltimore Punk & Hardcore
>http://www.baltimorepunk.com
>
>PunkRockShows
>http://www.punkrockshows.com
>
>Theory X Design
>http://www.theoryxdesign.com
>
>United States Neapolitan Mastiff Club's Rescue Program
>http://www.neorescue.org
>
>
>
>----
>To subscribe, unsubscribe, or view list archives,
>visit http://www.webaim.org/discussion/

Laurie Davis-Covin, Writer/Editor
National Institute of Standards and Technology
100 Bureau Drive
Admin. Building, Room E 220
Gaithersburg, MD 20899
Ph: 301-975-8027





----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/