HTML Help

ajju · Joined: 25 Sep 2008 Posts: 4

TH - Header 1 | Header 2 | Header 3 | Header 4
TD - Cell A1 Cell A2 Cell A3 Cell A4
TD - Cell B1 Cell B2 Cell B3 Cell B4
. - . . . .
. - . . . .
. - . . . .
. - . . . .

The above table has a Header (TH) and following Data (TD). I have used frame="hsides" rules="rows" and Border="4". According to the above code we get borders in between each rows.

Now, I need a Horizontal line in between only on each Header Cell with the row's border intact.. How to achieve this ? (something like which happens in frame="void" rules="all"). In short, I need a header with both horizontal and vertical borders and row data with only horizontal borders.

Any help will be appreciated greatly.

Thanks,
Ajju

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Something like this
Code: <table id="data">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th class="last" scope="col">Header 4</th>
</tr>
<tr>
<td>Cell A1</td>
<td>Cell A2</td>
<td>Cell A3</td>
<td>Cell A4</td>
</tr>
<tr>
<td>Cell B1</td>
<td>Cell B2</td>
<td>Cell B3</td>
<td>Cell B4</td>
</tr>
<tr>
<td>Cell C1</td>
<td>Cell C2</td>
<td>Cell C3</td>
<td>Cell C4</td>
</tr>
</table>

Use css to style
Code: <style type="text/css">
* {margin: 0; padding: 0;}
#data {border-collapse: collapse;}
#data th {border-right: 1px solid #000; padding: 0 10px;}
#data th.last {border-right: none;}
#data tr {border-bottom: 1px solid #000;}
#data td {text-align: center; padding-top: 10px;}
</style>

ajju · Joined: 25 Sep 2008 Posts: 4

Hi,

Thanks a lot, your solution is 100%. could u just explain how this was achieved in brief? great stick. thanks :)

sticks464 · Joined: 31 Dec 2006 Posts: 1283

I'll just explain each element of the css
* {margin: 0; padding: 0;}...removes browser defaults
#data {border-collapse: collapse;}...collapses the table to remove default padding between cells.
#data th {border-right: 1px solid #000; padding: 0 10px;}...gives the table header cells (td) a 1px border and
adds some padding to the top and bottom of each cell
#data th.last {border-right: none;}...removes the 1px border from the last td of the th, this td was given a class of last (<th class="last" scope="col">Header 4</th>) so this rule would only affect that particular td
#data tr {border-bottom: 1px solid #000;}...by using the border-collapse element on the table, the tr (table row) can now get a 1px border on the bottom
#data td {text-align: center; padding-top: 10px;}...give alignment for the text of each cell (td) and giving each cell some padding on the top and bottom for readibility

********************************************************************************
Much more can be done using css to jazz up a table that is used for tabular data.
Use javascript to apply a zebra stripping effect
<script language="javascript">
// define 'buildZebraTable()' function
function buildZebraTable(tableId){
var table=document.getElementById(tableId);
if(!table){return};
// get all <tbody> table elements
var tbodies=document.getElementsByTagName('tbody');
for(var i=0;i<tbodies.length;i++){
var evenFlag=false;
// get all <tr> table elements
var trows=document.getElementsByTagName('tr');
for(var j=0;j<trows.length;j++){
// assign background color to even and odd rows
trows[j].style.backgroundColor=!evenFlag?'#eeeeee':'#cccccc'; //set row background colors
evenFlag=!evenFlag;
}
}
}
// run 'buildZebraTable()' function when web page is loaded
window.onload=function(){
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
buildZebraTable('data'); //id of table goes here
}
}
</script>

Add tbody tags to the table
<table id="data">
<tbody>
tr's and td's here
</tbody>
</table>

Add more css
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1em;
}
#data {border-collapse:collapse; margin: 10px;}
#data th {border-right: 1px solid #000; padding: 10px; background: #FFFFCC; font-size: 1.2em;}
#data th.last {border-right:none;}
#data tr {border-bottom: 1px solid #000;}
#data td {text-align: left; padding: 5px; color: #00FF00;}
#data td {text-decoration: underline;}
#data td:first-letter {font-size:1.3em; color: #FF0000;}

Hope this helps.

ajju · Joined: 25 Sep 2008 Posts: 4

That's a great code work dude, thanks.

ajju · Joined: 25 Sep 2008 Posts: 4

Can you please let you know best tutorial/ ebook on <DIV>.