Table Formatting

Martin Eyles · Nov 23, 2004

Hi!

I am trying to make several 1x3 tables on a webpage, where all three cells
have black backgrounds and white text. However, I want the space around each
of the cells, and the whole box to be coloured (see
http://www.bytronic.com/martinTest/table.gif). I will be programatically
changing the colour of this border on the client side, based on data from an
embeded asp.net page.

Is there a way I can set the html/css up so that I can do this by modifying
just one style property (table border style does not change the colour of
the space between the cells). Also, how do I control the size of the area
between cells. I have tried the margin, padding and border properties of
both the cells and the rows in my css code, and it doesn't seem to work.

Thanks,

Regards,
Martin

Karl Seguin · Nov 23, 2004

Martin Eyles · Nov 24, 2004

Thanks, that helps. However I still have a few questions. Is there a way to
make the border on the outside the same as between the cells? (there are two
borders adding together between the cells, which makes them too big now).
Also, is there a way to get javascript to change the properties of a
stylesheet class. I only know how to change the style of an object
dynamically by adding to an the style of an element selected by id.

Thanks,
Martin

Karl Seguin · Nov 24, 2004

For the 2nd point, is this what you mean:
<div id="someItem" class="myClass">asdas</div>

var item = document.getElementById("someItem")
if (item != null){
item.className = 'someNewClass'; //changes the entire class
item.style.backgroundColor = '#FF0'; //changes a specific style
}

For the first point, I think something like this is what you mean:
<style>
td.ugly{
border:6px solid #F00;
background:#000;
border-top:0px;
color:#FFF;
padding:2px 0px 2px 0px;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" class="ugly" style="border-top:6px solid
#F00;">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
</table>

Note the border-top is set to 0 and added to the first row..

Karl

Martin Eyles · Nov 25, 2004

Hi,

Based on your suggestions, I have the code at the bottom of the page. What I
was hoping I could do, was get rid of the loop in the java-script, by
changing a property of the <table>, rather than that of the <td>s. I was
also hoping I could generate this look with less stylesheet. Is this
possible, or is it best to use the code as show below.

Thanks again,

Martin

--
Martin Eyles
(e-mail address removed)

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TEST.aspx.vb"
Inherits="LineViewProto.NET.TEST"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>TEST</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<style>td.ugly{ border:6px solid #F00; background:#000;
border-top:0px; color:#FFF; padding:2px 0px 2px 0px;}
</style>
<script>
function test(){
for (i=1; i<=3; i++){
reference="table2data"+i
var item = document.getElementById(reference)
if (item != null){
item.style.borderColor = '#0FF'; //changes a specific
style
}
}
}
</script>
</head>
<body ms_positioning="GridLayout" onload="test();">
<table id="table1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" class="ugly" style="BORDER-TOP:red 6px
solid">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
</table>
<br>
<table id="table2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="table2data1" width="75" class="ugly"
style="BORDER-TOP:red 6px solid">Test</td>
</tr>
<tr>
<td id="table2data2" width="75" class="ugly">Test</td>
</tr>
<tr>
<td id="table2data3" width="75" class="ugly">Test</td>
</tr>
</table>
<br>
<table id="table3" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" class="ugly" style="BORDER-TOP:red 6px
solid">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
</table>
</body>
</html>

Karl Seguin · Nov 25, 2004

Your javascript can be improved..namely, what happens if you have more than
3 cells?

<table id="table1">
<tr>
<td...>
</tr>
</table>

function test(){
var table = document.getElementById('table1');
var tds = table.getElementsByTagName('td');
for (var i = 0; i < tds.length; ++i){
var td = tds;
td.style.backgroundColor = '#F00';
}
}

As for the overall "different" way of doing it, you can access the
stylesheet directly via document.styleSheets (or something similar) and
manipulate the rules. This would [probably] allow you to do something like:

<style>
table.borderTable td { styles for TD here }
</style>
<table class="borderTable">
<tr>
<td>No classes/styles needed here</td>
<td>No classes/styles needed here</td>
<td>No classes/styles needed here</td>
</tr>
</table>

function test(){
var ss = document.styleSheets[0];
ss.rules[0].style.borderColor="#F00";
}

which, from your description might be more what you want.. You'll have to
explore the exact way of doing this yourself though as i can't help any
further (also, you might have cross-browser issues, dunno):
http://msdn.microsoft.com/workshop/author/dhtml/reference/collections/stylesheets.asp

Karl

I need help fixing my website	2	Oct 15, 2023
Help with my responsive home page	2	Dec 14, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Login button code	8	Jul 7, 2021
I need help making a zooming function	11	Dec 14, 2021
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

Table Formatting

Martin Eyles

Karl Seguin

Martin Eyles

Karl Seguin

Martin Eyles

Karl Seguin

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads