Sent by Glenn E. Lanier, II on 7 December 2004 01:01
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/
