467,858 Members | 1,666 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,858 developers. It's quick & easy.

Table Formatting

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

--
Martin Eyles
ma**********@NOSPAM.bytronic.com
Nov 18 '05 #1
  • viewed: 1537
Share:
4 Replies
<style>
td.ugly{
border:6px solid #F00;
background:#000;
color:#FFF;
padding:2px 0px 2px 0px;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
</table>

if you only want to change one property, use the className and create a 2nd
class...

Karl

--
MY ASP.Net tutorials
http://www.openmymind.net/
"Martin Eyles" <ma**********@NOSPAM.bytronic.com> wrote in message
news:10*************@corp.supernews.com...
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

--
Martin Eyles
ma**********@NOSPAM.bytronic.com

Nov 18 '05 #2
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" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net>
wrote > <style>
td.ugly{
border:6px solid #F00;
background:#000;
color:#FFF;
padding:2px 0px 2px 0px;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
</table>

if you only want to change one property, use the className and create a 2nd class...

Karl

"Martin Eyles" <ma**********@NOSPAM.bytronic.com> wrote

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.


--
Martin Eyles
ma**********@NOSPAM.bytronic.com
Nov 18 '05 #3
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
--
MY ASP.Net tutorials
http://www.openmymind.net/
"Martin Eyles" <ma**********@NOSPAM.bytronic.com> wrote in message
news:10*************@corp.supernews.com...
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" <karl REMOVE @ REMOVE openmymind REMOVEMETOO . ANDME net>
wrote > <style>
td.ugly{
border:6px solid #F00;
background:#000;
color:#FFF;
padding:2px 0px 2px 0px;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
<tr>
<td width="75" class="ugly">Test</td>
</tr>
</table>

if you only want to change one property, use the className and create a 2nd
class...

Karl

"Martin Eyles" <ma**********@NOSPAM.bytronic.com> wrote

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.
--
Martin Eyles
ma**********@NOSPAM.bytronic.com

Nov 18 '05 #4
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
ma**********@NOSPAM.bytronic.com
<%@ 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>
Nov 18 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Mike | last post: by
2 posts views Thread by Leo Duran | last post: by
2 posts views Thread by Jeff | last post: by
10 posts views Thread by Greg Lovern | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.