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
I want to put it into my site...
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
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
Last edited: