WebAIM - Web Accessibility In Mind

E-mail List Archives

re: Table Haunts Me

for

From: webmaster
Date: Jul 31, 2003 11:10AM

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/