Sent by Ryan Cannon on 7 December 2004 15:03
We had a the same problem with our registrar's page, and had to develop
a layout special for large-width content areas (see
http://www.alma.edu/academics/registrar/classes/?action=browse&term=FA2004
as compared to any other page within the site).
A couple things first off:
Instead of adding a class to each element, you may want to use col
elements and collapsing borders, for example,
<table class="tblSchedule">
<colgroup>
<col class="CallNumber" />
<col class="CourseNumber" />
....
</colgroup>
<tr>
<td>1085</td>
<td>ENG 147 101</td>
....
</tr>
</table>
This way you can style your columns and cell more easily;
table.tblSchedule { border-collapse: collapse }
table.tblSchedule td { border: 1px solid red }
table.tblSchedule col.CallNumber { width: 4em; }
table.tblSchedule col.CourseNumber { 15em; }
....
Also, I recommend using height as ems (font height) and widths as either
percentages or exes (font x-height, more representative of font width).
Should a user scale up the font height, you table will widen
disproportionately to the font-size increase. Percentages will lock-in
your cell widths to the browser window, and exes will (for the browsers
that don't calculate ex as em/2) will be proportionate to font width.
One way to ensure that the tables cells have enough width is to specify
a fixed-width font, then specify the number of characters you want to
safely display ( col.CallNumber { width: 5ex } for example ).
Finally, you may want to think about adding <th scope="col">, <thead>
and <tbody> elements to improve the accessibilty of the table and the
way it prints. You may want to look into some scripting methods to
improve visibilty--Zebra Tables from alistapart.com or vibrantTable from
my website (http://www.ryancannon.com/design/cssjs/) are two methods of
adding every-other-cell shading that avoid inline styles. Scripting
could also allow you to hide columns or replace TD cells with their abbr
attribute.
Hope that makes sense!
Ryan Cannon
Freelance Web Design
RyanCannon.com <http://ryancannon.com/?refer=email>
(989) 463-7060
[EMAIL-REMOVED] wrote:
>>
>> Subject:
>> [css-d] Styling tables
>> From:
>> "Glenn E. Lanier, II" [EMAIL-REMOVED]>
>> Date:
>> Mon, 6 Dec 2004 19:16:34 -0600
>> To:
>> [EMAIL-REMOVED]>
>>
>> To:
>> [EMAIL-REMOVED]>
>>
>>
>>Greetings. I have a table (containing tabular data -- a course schedule) I want
>>to style. Each row contains more information that can reasonably be displayed in
>>a single line. I am stuck with a 600px width of the entire table, but have some
>>flexibility in what information is displayed where (provided all data is
>>displayed).
>>
>>Each row contain: call number, course number, title, hours, time of course, days
>>course meets, building/room, instructor, campus, term length, date rage of
>>course, and any notes.
>>
>>I thought we might be able to create everything in single row (TR) (with a
>>border or shading), then visually drop about half the information into a second
>>"row" on screen. If I'm completely off target, please advise.
>>
>>HTML and in-line CSS below. I've turned on some borders and shading to make
>>things easier to see (for me, anyway).
>>
>><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>>"http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
>><html>
>><head>
>><title>Sample Schedule</title>
>><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
>><style media="screen" type="text/css">
>>html, *
>>{
>> padding:0px;
>> margin:0px;
>>}
>>
>>#divContent
>>{
>> width:600px; /* Client requirement */
>> margin:auto; /* Center everything */
>>}
>>#tblSchedule
>>{
>> font-size:.85 em;
>> border-collapse:collapse; /* HTML Cell-padding */
>>}
>>
>>#tblSchedule table
>>{
>> width:100%;
>>}
>>
>>#tblSchedule TR /* Individual Row */
>>{
>> border:thin solid blue;
>>}
>>
>>#tblSchedule TD.tdCallNumber
>>{
>> width:4em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdCourseNumber
>>{
>> width:15em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdTitle
>>{
>> width:30em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdHours
>>{
>> width:4em;
>> border:thin solid red;
>> text-align:right;
>>}
>>
>>#tblSchedule TD.tdTime
>>{
>> width:10em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdDays
>>{
>> width:7em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdBuilding
>>{
>> width:10em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdInstructor
>>{
>> width:15em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdCampus
>>{
>> width:14em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdTerm
>>{
>> width:15em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdDates
>>{
>> width:35em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TD.tdNotes
>>{
>> width:30em;
>> border:thin solid red;
>>}
>>
>>#tblSchedule TR.trShaded
>>{
>> background-color:#c0c0c0;
>>}
>>
>></style>
>></head>
>><body>
>><div id="divContent">
>> <table id="tblSchedule">
>> <tr class="trShaded">
>> <td class="tdCallNumber">1085</td>
>> <td class="tdCourseNumber">ENG 147 01</td>
>> <td class="tdTitle">ENGLISH Comp</td>
>> <td class="tdHours">3</td>
>> <td class="tdTime">1100 1215</td>
>> <td class="tdDays">TU TH</td>
>> <td class="tdBuilding">ALL 200A</td>
>> <td class="tdInstructor">John Doe</td>
>> <td class="tdCampus">Campus 1</td>
>> <td class="tdTerm">FULL TERM</td>
>> <td class="tdDates">08/08/2004 - 12/15/2004</td>
>> <td class="tdNotes"> </td>
>> </tr>
>> <tr>
>> <td class="tdCallNumber">1166</td>
>> <td class="tdCourseNumber">COM 250 70</td>
>> <td class="tdTitle">E-COMMERCE</td>
>> <td class="tdHours">3</td>
>> <td class="tdTime">TBA TBA</td>
>> <td class="tdDays">TBA</td>
>> <td class="tdBuilding">HEL AUD</td>
>> <td class="tdInstructor">DOE JANE</td>
>> <td class="tdCampus">INTERNET</td>
>> <td class="tdTerm">FULL TERM</td>
>> <td class="tdDates">08/20/2004 - 12/15/2004</td>
>> <td class="tdNotes">ORIENTATION 7PM 8/25</td>
>> </tr>
>> <tr class="trShaded">
>> <td class="tdCallNumber">1341</td>
>> <td class="tdCourseNumber">ART 255 30</td>
>> <td class="tdTitle">ART HISTORY</td>
>> <td class="tdHours">3</td>
>> <td class="tdTime">TBA TBA</td>
>> <td class="tdDays">TBA</td>
>> <td class="tdBuilding">ASC 106</td>
>> <td class="tdInstructor">DOE GEORGE</td>
>> <td class="tdCampus">OTHER CAMPUS</td>
>> <td class="tdTerm">MINI I</td>
>> <td class="tdDates">08/20/2004 - 12/15/2004</td>
>> <td class="tdNotes">INDEPENDENT STUDY</td>
>> </tr>
>> </table>
>></div>
>></body>
>></html>
>>
>>--------------------------------------------------------
>>Glenn E. Lanier, II [EMAIL-REMOVED]
>>
>>
>>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
