473,326 Members | 2,588 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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
4 1719
<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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Mike | last post by:
Greetings. I am having some difficulty with formatting a table on a web form and hope someone can help. Currently the table has a single column. Desired output format (X = text , X = number) ...
6
by: Kevin G. | last post by:
I'm not sure if this is possible, but if a page uses a CSS style sheet and you would still like to use good old <font> tags... is there a tag to tell the browser to ignore the CSS formatting just...
4
by: deko | last post by:
I've heard it's best not to have any formatting specified for Table fields (except perhaps Currency), and instead set the formatting in the Form or Report. But what about Yes/No fields? When I...
4
by: Dave Brydon | last post by:
Access 2003 I have a combo box in my personnel table, which draws its data from a trade code table; the original field in the code table, is numeric, Long Integer, and formatted with 5 zero's . ...
2
by: Leo Duran | last post by:
Hi, I am working on an app right now that makes extensive use of the DataList control. I chose the DataList because I need to do multi row formatting. I am using it like so.
10
by: Coleen | last post by:
Hi all :-) I have a weird formatting problem with an HTML table that I am populating using VB.Net and HTML. Here is the snippet of code for the cell I'm trying to format: Dim...
2
by: Jeff | last post by:
I've been trying for days to figure out why the spacing between the rows on the left-most column of my table is screwy. Take a look here: http://mypage.iu.edu/~jbeverid/index_new.htm Right...
0
by: BrutalByte | last post by:
I have a report that I would like to apply conditonal formatting to by referencing another table's data. The "NSN" data table is a single column of NSNs. What string do I enter into the...
10
by: Greg Lovern | last post by:
I have a very large html table created by MS Word, saved as it's "Web Page, Filtered" file type. Every html table cell has lots of formatting tags. Most of the file size is that formatting. Is...
2
by: Jukka K. Korpela | last post by:
Sub titulo "Re: DIV borders different in IE7 when in td" scripsit Ben C: This seems to be the heart of the matter, and I'm trying to get a real discussion started, by moving the discussion to...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.