CSS and <table> Question

JonB · 25 Jan 2007 at 16:24

Hi There,

I found a basic table look which I like, and would like to use for my website.

http://icant.co.uk/csstablegallery/index.php?css=74#r74

Code:

/*
Tema: Blue - Minimalist design in blue
Author: Newton de Góes Horta
Site: http://www.nghorta.com
Country Origin: Brazil
*/

table {
 font-size: 95%;
 font-family: 'Lucida Grande', Helvetica, verdana, sans-serif;
 background-color:#fff;
 border-collapse: collapse;
 width: 100%;
 line-height: 1.2em;
}
caption {
 font-size: 30px;
 font-weight: bold;
 color: #002084;
 text-align: left;
 padding: 10px 0px;
 margin-bottom: 2px;
 text-transform: capitalize;
}
thead th {
 border-right: 2px solid #fff;
 color:#fff;
 text-align:center;
 padding:2px;
 height:25px;
 background-color: #004080;
}
tfoot {
 color:#002084;
 padding:2px;
 text-transform:uppercase;
 font-size:1.2em; 
 font-weigth: bold;
 margin-top:6px;
 border-top: 6px solid #004080;
 border-bottom: 6px solid #004080;
}
tbody tr {
 background-color:#fff;
 border-bottom: 2px solid #c0c0c0;
}
tbody td {
 color:#002084;
 padding:5px;
 text-align:left;
}
tbody th {
 text-align:left;
 padding: 2px;
}
tbody td a, tbody th a {
 color:#002084;
 text-decoration:underline;
 font-weight:normal; 
}
tbody td a:hover, tbody th a:hover {
 text-decoration:none;
}

I want to put it into my site...

Code:

<!-- header_top.inc.php - generic upper header for html pages
**** Author : Jonathan Blower
**** Original Author : John O'Reilly
**** See DOCS/CHANGELOG for version information
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<title>ITIS Asset Management - Viewing Computer Hardware</title><link href="css/ms.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="JavaScript">
/* header_bottom.inc.php - generic lower header for html pages
**
** Author : John O'Reilly
** See DOCS/CHANGELOG for version information
*/
</script> 
</head>
<body link="#0000FF" vlink="#00000FF">
<table width="100%"  border="0">
  <tr>
    <td height="59" class="Head1">ITIS Holdings PLC - ITIS Asset Management System</td>

    <td height="59" class="Head1"></td>
    <td rowspan="2" align="right"><img src="gfx/itislogo.gif" width="89" height="83"></td>
  </tr>
<tr><td colspan="2" class="smallbold">User : Jonathan Blower</td></tr><tr><td colspan="2" class="smallbold">Current Page : Viewing Computer Hardware</td><td class="smallbold" align="right"><a href="menu.php">Main Menu</a> / <a href="logon.php?logoff=">Log Off</a></td></tr></table>
<hr>
<table align="center" border="0"><tr><th>Asset Tag No.</th><th>Make / Model</th><th>Spec's</th><th>Operating System</th><th>Location</th><th>User</th></tr><tr><td align="center">22</td><td align="left">Dell<br />Optiplex GX150</td><td align="left">1.0  ghz Pentium 3<br>512mb Ram<br>40gb HDD</td><td align="center"><b>WKSTNGENALTM1</b><br />(Windows 2000)<br /></td><td align="center">B<br />M1 Meeting Room<br />M1 Meeting Room</td><td align="center"> </td></tr><tr><td align="center">24</td><td align="left">Dell<br />Optiplex 170L</td><td align="left">3.0  ghz Pentium 4<br>1gb Ram<br>80gb HDD</td><td align="center"><b>WKSTNDIRALT01</b><br />(Windows XP)<br /></td><td align="center">16<br />CEO's Office<br />CEO's Desk</td><td align="center">Stuart Marks</td></tr><tr><td align="center">26</td><td align="left">Dell<br />Optiplex GX620</td><td align="left">2.8  ghz Pentium 4<br>1gb Ram<br>80gb HDD</td><td align="center"><b>WKSTNDIRALT03</b><br />(Windows XP)<br /></td><td align="center">20<br />GM<br />GM Desk 1</td><td align="center"> </td></tr><tr><td align="center">28</td><td align="left">Dell<br />Precision WorkStation 370</td><td align="left">3.0  ghz Pentium 4<br>1gb Ram<br>160gb HDD</td><td align="center"><b>WKSTNDIRALT04</b><br />(Windows XP)<br /></td><td align="center">19<br />Chief of Operations Office<br />Chief of Operations Desk</td><td align="center">Jonathan Burr</td></tr><tr><td align="center">34</td><td align="left">Sony<br />Vaio VGN-N19VP/B</td><td align="left">1.6  ghz Centrino Core Duo T2050<br>512mb Ram<br>80gb HDD</td><td align="center"></td><td align="center">99<br />Out of Office<br />Out of Office</td><td align="center"> </td></tr><tr><td align="center">686</td><td align="left">Dell<br />Optiplex GX110</td><td align="left">1.0  ghz Pentium 3<br>128mb Ram<br>10gb HDD</td><td align="center"><b>WKSTNINFALT01</b><br />(Windows XP)<br /></td><td align="center">60<br />Bay 6<br />Desk 4</td><td align="center"> </td></tr><tr><td align="center">930</td><td align="left">Dell<br />Optiplex GX620</td><td align="left">3.0  ghz Pentium D<br>2gb Ram<br>80gb HDD</td><td align="center"><b>WKSTNINFALT02</b><br />(Windows XP)<br /></td><td align="center">18<br />CEO Secretary's Office<br />CEO Secretary's Desk 2</td><td align="center"> </td></tr><tr><td align="center">931</td><td align="left">Dell<br />Optiplex 170L</td><td align="left">3.0  ghz Pentium 4<br>1gb Ram<br>80gbgb HDD</td><td align="center"><b>WKSTNSUPALT05</b><br />(Windows XP)<br /></td><td align="center">31<br />Bay 2<br />Desk 4</td><td align="center"> </td></tr><tr><td align="center">932</td><td align="left">Dell<br />Optiplex 170L</td><td align="left">3.0  ghz Pentium 4<br>1gb Ram<br>80gb HDD</td><td align="center"><b>WKSTNSUPALT06</b><br />(Windows XP)<br /></td><td align="center">32<br />Bay 2<br />Desk 5</td><td align="center"> </td></tr><tr><td align="center">936</td><td align="left">Dell<br />Optiplex GX620</td><td align="left">3.4  ghz Pentium D<br>1gb Ram<br>80gb HDD</td><td align="center"><b>WKSTNSUPALT03</b><br />(Windows XP)<br /></td><td align="center">33<br />Bay 3<br />Desk 1</td><td align="center"> </td></tr><tr><td align="center">937</td><td align="left">HP<br />Compaq nx6310</td><td align="left">1.7  ghz Celron M<br>256mb Ram<br>40gb HDD</td><td align="center"><b>LAPTOPINFALT01</b><br />(Windows XP)<br /></td><td align="center">99<br />Out of Office<br />Out of Office</td><td align="center"> </td></tr><tr><td align="center">938</td><td align="left">HP<br />Compaq nx6110</td><td align="left">1.6  ghz Pentium M<br>512mb Ram<br>40gb HDD</td><td align="center"><b>LAPTOPSUPALT01</b><br />(Windows XP)<br /></td><td align="center">99<br />Out of Office<br />Out of Office</td><td align="center"> </td></tr><tr><td align="center">949</td><td align="left">HP<br />Compaq nx6310</td><td align="left">1.6  ghz Core 2 T5500<br>512mb Ram<br>40gb HDD</td><td align="center"></td><td align="center">99<br />Out of Office<br />Out of Office</td><td align="center"> </td></tr><tr><td align="center">950</td><td align="left">Apple<br />iMac 24"</td><td align="left">2.1  ghz Core 2 Duo<br>2gb Ram<br>250gb HDD</td><td align="center"><b>itis-holdings-computer</b><br />(Mac OS X)<br /></td><td align="center">47<br />Bay 4<br />Desk 7</td><td align="center"> </td></tr><tr><td></td></tr></table><!-- footer.inc.php - generic footer for html pages
****
**** Author : John O'Reilly
**** See DOCS/CHANGELOG for version information
-->

<hr>
<table width="100%" border="0">
  <tr class="FormBodyMini">
    <td width="80%"></td>
    <td width="20%" align="right">
	v0.1    </td>
  </tr>
</table>
</body></html>

I only want it to affect the middle table, which contains the data though.

How do I go about defining the CSS so that it would only apply to the middle table? Do I need to give the middle table a certain class, and then give all the code in the css file a class? If so, how is this done? (The css part)

Thanks in advance!

JB

tom_e · 25 Jan 2007 at 16:31

encase the bit you want to be effected in <div id="middle"></div>
then add #middle into your css file.
I think thats what your asking

JonB · 25 Jan 2007 at 16:39

Would i have to go through and edit the css file like this

Code:

/*
Tema: Blue - Minimalist design in blue
Author: Newton de Góes Horta
Site: http://www.nghorta.com
Country Origin: Brazil
*/

#middle table {
 font-size: 95%;
 font-family: 'Lucida Grande', Helvetica, verdana, sans-serif;
 background-color:#fff;
 border-collapse: collapse;
 width: 100%;
 line-height: 1.2em;
}
#middle caption {
 font-size: 30px;
 font-weight: bold;
 color: #002084;
 text-align: left;
 padding: 10px 0px;
 margin-bottom: 2px;
 text-transform: capitalize;
}
#middle thead th {
 border-right: 2px solid #fff;
 color:#fff;
 text-align:center;
 padding:2px;
 height:25px;
 background-color: #004080;
}
#middle tfoot {
 color:#002084;
 padding:2px;
 text-transform:uppercase;
 font-size:1.2em; 
 font-weigth: bold;
 margin-top:6px;
 border-top: 6px solid #004080;
 border-bottom: 6px solid #004080;
}
#middle tbody tr {
 background-color:#fff;
 border-bottom: 2px solid #c0c0c0;
}
#middle tbody td {
 color:#002084;
 padding:5px;
 text-align:left;
}
#middle tbody th {
 text-align:left;
 padding: 2px;
}
#middle tbody td a, tbody th a {
 color:#002084;
 text-decoration:underline;
 font-weight:normal; 
}
#middle tbody td a:hover, tbody th a:hover {
 text-decoration:none;
}

JIMA · 25 Jan 2007 at 22:55

Hi,

Another approach would be to define your table as a particular class and then link the table styles with that class. Using this you can use the same style on lots of different tables (identified by class) rather than just the one with the given ID.

At least that's how I think it works.

Jim

Deleted member 11679 · 26 Jan 2007 at 10:17

JIMA said:
Hi,

Another approach would be to define your table as a particular class and then link the table styles with that class. Using this you can use the same style on lots of different tables (identified by class) rather than just the one with the given ID.

At least that's how I think it works.

Jim

That's how I would do it, define everything in respects of table with class="middle"

In the stylesheet it would be

Code:

table.middle 
{
 */ Your stylesheet settings */
}

td.middle
{
 */ Your stylesheet settings */
}


tr.middle
{
 */ Your stylesheet settings */
}

And then the appropriate tags in the html file would be:

Code:

<table class="middle">
  <tr class="middle">
      <td class="middle">Cols1</td>
      <td class="middle">Cols2</td>
  </tr>
</table>

Hope this helps,

Tom

LazyManc · 26 Jan 2007 at 11:42

TomWilko said:
That's how I would do it, define everything in respects of table with class="middle"

In the stylesheet it would be

Code:

table.middle { */ Your stylesheet settings */ } td.middle { */ Your stylesheet settings */ } tr.middle { */ Your stylesheet settings */ }

And then the appropriate tags in the html file would be:

Code:

<table class="middle"> <tr class="middle"> <td class="middle">Cols1</td> <td class="middle">Cols2</td> </tr> </table>

Hope this helps,

Tom

Tom's right, but here's a slightly less verbose version:

Code:

table.middle 
{
 */ Your stylesheet settings */
}

table.middle tr
{
 */ Your stylesheet settings */
}


table.middle td
{
 */ Your stylesheet settings */
}


<table class="middle">
  <tr>
      <td>Cols1</td>
      <td>Cols2</td>
  </tr>
</table>

That version will save peppering your tables with hundreds of class="".

CSS and <table> Question

Deleted member 11679

Deleted member 11679