Need some help formatting a table

Supercell · 25-11-2007 10:51am #1

I'm struggling to figure out how to add cell borders correctly.
I've attached a page I'm working on currently for my weather website.

As you can see the data is very hard to read in the monthly extremes section .
Ideally I like to make blocks around each months top five in order to make the data more identifiable like on http://www.wicklowweather.com/extremes.htm except I'd like to keep the cells distinct, just the outer edges in bold (by the way I know the author of the other site and he's fine with my plagiarism

)

Hope that makes some sense! Any help appreciated.

zAbbo · 25-11-2007 11:25am

Do you mean highlight them by making them a different font color ?

Bear in mind, neither examples are easy to read/use to non-weather aficionados...

Perhaps mock up an image of what you're trying to achieve.

forbairt · 25-11-2007 1:40pm

step 1 .. remove all those align="center" from your code .. they are bulking it up by about 50% ...

it can be replaced with 1 line of CSS ...

I've also added in some highlighting there ...

<style type="text/css">
body {
        font-family:"Myriad Web",Verdana,Helvetica,Arial,sans-serif;
        font-size:80%;  
        
}
table.stat th, table.stat td {
  font-size : 9px;
  font-family : "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
}

span.c1 {color: white}
 
 
table {
  border: 0; 
  cell-spacing:0;
  cell-padding:0;
  border-collapse: collapse;
}
table tr td, 
table tr th { 
  vertical-align: top;
  text-align: center;
  padding: 6px;
  border:0;
  border-spacing:0;
  border-color: #CFCFCF;
}

table tr.nextrow { border-bottom: 3px solid #008000;  }

</style>

Now to automagic the row highlighting ... I've added in a small bit of Javascript that detects each row ... give your table an ID ... tabbed lets say .. and add the following JS to the start of your file

<script language="javascript">
<!--
function updateRows()
{
var myTable = document.getElementById('tabbed');
var allTRs = myTable.getElementsByTagName("tr");
for (i=1; i <= allTRs.length ; i++) {
  if (i % 2 == 1)
    allTRs[i].style.backgroundColor = "#EEEEEE";
}
}
-->
</script>
</head>
<body onload="updateRows();">

Also add in for the final tr of each Temperature Extremes ... class="nextrow" and away you go ...

you'll end up with something like this ...

http://www.forbairtmedia.ie/samples/2007-11-25/weathersamplemockup/

Which is slightly easier to read in my opinion ... its not finished .. but should give you some ideas to play with

James

Supercell · 25-11-2007 4:46pm

Thanks very much guys.
Forbairt, that looks really nice, its certainly given me ideas on how to format it better.
Will definatly have a go at that next weekend, for the moment I'm knackered having been at it since around 09:30 this morning non-stop.
The rather ugly current version is at http://www.annamoe.net/extremes.htm (at least the figures are filled in accuratly at last!)

forbairt · 25-11-2007 4:50pm

no problem ...

your back home link is broken ... "http://ww.annamoe.net/index.htm" should probably have another w with the ww

Supercell · 25-11-2007 5:02pm

forbairt wrote: »

no problem ...

your back home link is broken ... "http://ww.annamoe.net/index.htm" should probably have another w with the ww

Thanks again !

Need some help formatting a table

Comments