Taking Control of a table?

C

Craig

I have a 3rd party product that is quite old.

It produces reports dynamically via the web.

It users templates to do this.

They are very basic, one looks like this.

<html>
<head>
<meta name="author" >
</head>

<body>

<center>
<table cellpadding=3 cellspacing=0>
%REPORT%
</table>
</center>
</body>

</html>

Where the %report% variable is, this gets replaced with rows of data
(ie. <tr></tr>). The problem is that it translates the fonts from the
Report into very old html code.

Like this

<TR>
<TD NOWRAP ALIGN="left"><FONT FACE="Arial" SIZE=3><IMG
SRC="/images/empty.gif"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>147,345.00</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>70,111.00</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>

So with it having the font face styles in every column can we right
code to overwrite this?

I want to take control of the table and be able to set the row height
on row 1 where the headers go, also would like to set column
widths/colours etc.

Any ideas would be great

Regards

Craig
 
I

Ivo

I have a 3rd party product that is quite old.

It produces reports dynamically via the web.

It users templates to do this.

They are very basic, one looks like this.
Click to expand...
<TR>
<TD NOWRAP ALIGN="left"><FONT FACE="Arial" SIZE=3><IMG
SRC="/images/empty.gif"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>147,345.00</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>70,111.00</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>

So with it having the font face styles in every column can we right
code to overwrite this?

I want to take control of the table and be able to set the row height
on row 1 where the headers go, also would like to set column
widths/colours etc.
Click to expand...

Using DOM or innerHTML methods you can shape and style things to your
heart's content, ie. remove the font tags entirely and replace them with the
text inside. But it would really be better to do this on the serverside,
before sending the code to the client.
 
R

Robert

I have a 3rd party product that is quite old.

It produces reports dynamically via the web.

It users templates to do this.

They are very basic, one looks like this.
Click to expand...


I wrote up an example file. The text does flash on my computer. I
tried this in Netscape 7.2, IE 5.2, and Safari 1.0 on MacOS 10.2.6.
You could hide the table untile you were done changing it.

The image src tag may have wrapped.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" >
<title>Override inline fonts</title>
<style type="text/css">

td { font-size: xx-large;
color: green;
font-family: cursive;
}
</style>

<script type="text/javascript">
function adjust()
{
var t, theFonts, rows;

// Verify that we have the needed methods.
if (document.getElementById &&
document.getElementsByTagName)
{
// Start looking at the beginning of the table
t = document.getElementById("mytable");

// Find all rows withing the table
rows = t.getElementsByTagName("tr");

// Find all the font tags in the first row.
// I know there is only one row, so I skipped
// the for loop.
theFonts = rows[0].getElementsByTagName("font");

/*
Font tag properties have priority over CSS attributes.
I will blank out the font propeties that I want the CSS
rules to apply to. I'll set the color to blue to
show how you can change a font property.
*/
for (var i = 0; i<theFonts.length; i++)
{
theFonts.face = "";
theFonts.size = "";
theFonts.color = "blue";
}
}
}
</script>
</head>

<body id="documentbody" onload="adjust();">
<p>We will change this table after the page loads.</p>
<center>
<table id="mytable" cellpadding=3 cellspacing=0>
<TR>
<TD NOWRAP ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">147,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>70,111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</table>
</center>

</body>

</html>
 
H

Hal Rosser

Craig said:
I have a 3rd party product that is quite old.

It produces reports dynamically via the web.

It users templates to do this.

They are very basic, one looks like this.

<html>
<head>
<meta name="author" >
</head>

<body>

<center>
<table cellpadding=3 cellspacing=0>
%REPORT%
</table>
</center>
</body>

</html>

Where the %report% variable is, this gets replaced with rows of data
(ie. <tr></tr>). The problem is that it translates the fonts from the
Report into very old html code.

Like this

<TR>
<TD NOWRAP ALIGN="left"><FONT FACE="Arial" SIZE=3><IMG
SRC="/images/empty.gif"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>147,345.00</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>70,111.00</FONT></TD>
<TD ALIGN="right"><FONT FACE="Arial" SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>

So with it having the font face styles in every column can we right
code to overwrite this?

I want to take control of the table and be able to set the row height
on row 1 where the headers go, also would like to set column
widths/colours etc.
Click to expand...

Have you tried using CSS ?
 
C

Craig

Thanks for the reply and example.

I think that does what I want, how do I get this to work with more
rows and also hide the initial table that gets loaded.

Once again, many thanks for your efforts!
 
R

Robert

Hal Rosser said:
Have you tried using CSS ?
Click to expand...
I tried:

<style type="text/css">

td { font-size: xx-large;
color: green !important;
font-family: cursive !important;
}
</style>

but found that <font> information has priority over style information.
The !important directive does override inline style information.

Robert
 
M

Michael Winter

[snip]
td { font-size: xx-large;
Click to expand...

It's best to use percentages or em units to specify font sizes. This
allows more flexibility should the user want to zoom content in or out. If
you use percentages, always specify

body {
font-size: 100%;
}

to avoid IE bugs.

[snip]
but found that <font> information has priority over style information.
The !important directive does override inline style information.
Click to expand...

It won't. A property of the cascade is that the most specific selector
takes precedence over the less specific. If inline style data specifies a
property that has been set in a style sheet, the style sheet-specified
property will be ignored. I assume the FONT element acts in this manner.

The first thing you could attempt to do is (remembering to include feature
detection):

var t = document.getElementById('mytable'),
f = t.getElementsByTagName('FONT');

for(var i = 0, m = f.length, c, p; i < m; ++i) {
c = f; p = c.parentNode;
for(var j = 0, cN = c.childNodes, n = cN.length; j < n; ++j) {
p.insertBefore(cN[j], c);
}
p.removeChild(c);
}

thereby removing all FONT elements from the table. Assuming that there is
no more inline style data, your style sheet settings should have an effect.

If this is for the Web, it would be best to try and preprocess the code
before making it available, rather than relying on script.

Mike
 
R

Robert

Thanks for the reply and example.

I think that does what I want, how do I get this to work with more
rows and also hide the initial table that gets loaded.
Click to expand...

Have a look at this example.

I suggest using firefox to see how the DOM. In firefox, do Tools ->
DOM Inspector. Click on the little arrows to go down. You will have
to click sever or eight times to get to the font tag.

The img src attribute text could have wrapped.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" >
<title>Override inline fonts</title>
<style type="text/css">
#mytable {visibility: hidden;
}

/* Show how once font attributes are removed, we can use
the style attributes. */
tr td { font-size: x-large;
font-family: cursive;
}

/* This is the id for the first cell in the table */
#row1cell1 { text-decoration: underline;
width: 400px;
height: 60px;}

/* Here is the last */
#row2cell4 { text-decoration: underline; }

</style>

<script type="text/javascript">
function adjust()
{
var t, theFonts, rows, theIds;

// Verify that we have the needed methods.
if (document.getElementById &&
document.getElementsByTagName)
{
// Start looking at the beginning of the table
t = document.getElementById("mytable");

// Find all rows withing the table
rows = t.getElementsByTagName("tr");


// Examine one row at a time.
for (var rowsLoop = 0; rowsLoop<rows.length; rowsLoop++)
{
theFonts =
rows[rowsLoop].getElementsByTagName("font");
/*
Font tag properties have priority over CSS
attributes. I will blank out the font propeties
that I want the CSS rules to apply to. I'll set
the color to blue to show how you can change a
font property.
*/
// Find all the font tags in the row.
for (var i = 0; i<theFonts.length; i++)
{
if (theFonts.removeAttribute)
{
theFonts.removeAttribute("face");
theFonts.removeAttribute("size");
}
else
{
// Well, nulling seems to work too.
theFonts.face = "";
theFonts.size = "";
}

theFonts.color = "blue";
}
// Zap in an id
// Please note the first cell in the table
// is row1cell1.
theIds =
rows[rowsLoop].getElementsByTagName("td");
for (var j = 0; j<theIds.length; j++)
{
theIds[j].id = "row" + ( rowsLoop + 1 ) +
"cell" + ( j + 1) ;

}

} // end of loop on rows

// Display the table
if (t.style)
{ t.style.visibility = "visible"; }
else
{
alert("Oh, we have a table to display, " +
"but we cannot.");
}
}

}
</script>
</head>

<body id="documentbody" onload="adjust();">
<p>We will change this table after the page loads.</p>
<center>
<table id="mytable" cellpadding=3 cellspacing=0>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">147,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>70,111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Reserve Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>7,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">7,111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>11.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</table>
</center>
</body>

</html>
 
M

Michael Winter

[snip]
Thanks. I tried to remove the font tags, but I didn't
get the code to work.
Click to expand...

Sorry. I forgot that DOM collections were live. That is, when you modify
the document, the returned collection is modified too. As the original
code deleted FONT elements, and when it moved the children of those
elements, the collections, f and cN, were getting shorter eventually
causing an out-of-bounds error. Working backwards through them is one
approach:

var t = document.getElementById('myTable'),
f = t.getElementsByTagName('FONT'),
i = f.length;

while(i--) {
var c = f, p = c.parentNode, cN = c.childNodes, j = cN.length;
while(j--) {p.insertBefore(cN[j], c.nextSibling);}
p.removeChild(c);
}

A feature detection version might go:

function isD(o) {return 'undefined' != typeof o;}
if(document.getElementById) {
var t = document.getElementById('myTable');

if(t && t.getElementsByTagName) {
var f = t.getElementsByTagName('FONT'),
i = f.length;

if(i) {
var c = f[0], p = c.parentNode;
if(p && p.insertBefore && p.removeChild && isD(c.childNodes)
&& isD(c.nextSibling))
{
while(i--) {
c = f; p = c.parentNode;
var cN = c.childNodes, j = cN.length;
while(j--) {p.insertBefore(cN[j], c.nextSibling);}
p.removeChild(c);
}
}
}
}
}

Mike
 
I

Ivo

I tried:

<style type="text/css">

td { font-size: xx-large;
color: green !important;
font-family: cursive !important;
}
</style>

but found that <font> information has priority over style information.
The !important directive does override inline style information.
Click to expand...

Have your CSS define rules for the font elements directly, not the td. Then
the cascade will work as you wish:

<style type="text/css">
font{font-family:Arial,sans-serif}
</style>
<font face="Times">
Look ma, no serifs!
</font>
 
R

Robert

Michael Winter said:
[snip]
Thanks. I tried to remove the font tags, but I didn't
get the code to work.
Click to expand...

Sorry. I forgot that DOM collections were live.
Click to expand...


Oh, I had meant to say that I had written up some code that made an
attempt to delete the font tags. The code that I had written didn't
work, so I changed to deleting the font attributes.

I did assume that the returned 'array' was fixed.

I'll study your new version.

Robert
 
C

Craig

Robert thanks very much for the code.

It works well and I understand what's going on!

A few more questions.

Rather than have to set the style for every cell individually in the
first row, can I just set the style for the whole row? I would also
like to hide certain rows, i understand I use the hidden function for
this but how do I specify the rows I want to hide, for example I want
to hide row 2.

Once again many thanks!

Craig

Thanks for the reply and example.

I think that does what I want, how do I get this to work with more
rows and also hide the initial table that gets loaded.
Click to expand...

Have a look at this example.

I suggest using firefox to see how the DOM. In firefox, do Tools ->
DOM Inspector. Click on the little arrows to go down. You will have
to click sever or eight times to get to the font tag.

The img src attribute text could have wrapped.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" >
<title>Override inline fonts</title>
<style type="text/css">
#mytable {visibility: hidden;
}

/* Show how once font attributes are removed, we can use
the style attributes. */
tr td { font-size: x-large;
font-family: cursive;
}

/* This is the id for the first cell in the table */
#row1cell1 { text-decoration: underline;
width: 400px;
height: 60px;}

/* Here is the last */
#row2cell4 { text-decoration: underline; }

</style>

<script type="text/javascript">
function adjust()
{
var t, theFonts, rows, theIds;

// Verify that we have the needed methods.
if (document.getElementById &&
document.getElementsByTagName)
{
// Start looking at the beginning of the table
t = document.getElementById("mytable");

// Find all rows withing the table
rows = t.getElementsByTagName("tr");


// Examine one row at a time.
for (var rowsLoop = 0; rowsLoop<rows.length; rowsLoop++)
{
theFonts =
rows[rowsLoop].getElementsByTagName("font");
/*
Font tag properties have priority over CSS
attributes. I will blank out the font propeties
that I want the CSS rules to apply to. I'll set
the color to blue to show how you can change a
font property.
*/
// Find all the font tags in the row.
for (var i = 0; i<theFonts.length; i++)
{
if (theFonts.removeAttribute)
{
theFonts.removeAttribute("face");
theFonts.removeAttribute("size");
}
else
{
// Well, nulling seems to work too.
theFonts.face = "";
theFonts.size = "";
}

theFonts.color = "blue";
}
// Zap in an id
// Please note the first cell in the table
// is row1cell1.
theIds =
rows[rowsLoop].getElementsByTagName("td");
for (var j = 0; j<theIds.length; j++)
{
theIds[j].id = "row" + ( rowsLoop + 1 ) +
"cell" + ( j + 1) ;

}

} // end of loop on rows

// Display the table
if (t.style)
{ t.style.visibility = "visible"; }
else
{
alert("Oh, we have a table to display, " +
"but we cannot.");
}
}

}
</script>
</head>

<body id="documentbody" onload="adjust();">
<p>We will change this table after the page loads.</p>
<center>
<table id="mytable" cellpadding=3 cellspacing=0>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">147,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>70,111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Reserve Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>7,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">7,111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>11.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</table>
</center>
</body>

</html>
Click to expand...
 
R

Robert

Rather than have to set the style for every cell individually in the
first row, can I just set the style for the whole row? I would also
like to hide certain rows, i understand I use the hidden function for
this but how do I specify the rows I want to hide, for example I want
to hide row 2.

Once again many thanks!
Click to expand...

Glad to help out.

Try this version. I added a row id. The first row is row1.

Please note, the user will be able to exmine the data in the hidden
row by looking at the source code, via a dom inspector, or by writing
some javascript code and running the code from the command line.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="author" >
<title>Override inline fonts</title>
<style type="text/css">

#mytable {visibility: hidden;
width: 400px;
height: 160px;}

/* Show how once font attributes are removed, we can use
the style attributes. */
tr td { font-size: x-large; }

/* Rows start with an index of one. */
#row1, #row4 { font-family: cursive; }
#row2 { display: none; }
#row3 { font-family: monospace; }

/* This is the id for the first cell in the table */
#row1cell1 { text-decoration: underline;
width: 400px;
height: 60px;}

#row3cell3 { font-family: cursive; }

/* Here is the last */
#row4cell4 { text-decoration: underline; }

</style>

<script type="text/javascript">
function adjust()
{
var t, theFonts, rows, theIds;

// Verify that we have the needed methods.
if (document.getElementById &&
document.getElementsByTagName)
{
// Start looking at the beginning of the table
t = document.getElementById("mytable");

// Find all rows withing the table
rows = t.getElementsByTagName("tr");

// Examine one row at a time.
for (var rowsLoop = 0; rowsLoop<rows.length; rowsLoop++)
{
// Add the row id. Row ids start with one.
rows[rowsLoop].id = "row" + ( rowsLoop + 1);

// Find the font tags in this row.
theFonts =
rows[rowsLoop].getElementsByTagName("font");
/*
Font tag properties have priority over CSS
attributes. I will blank out the font propeties
that I want the CSS rules to apply to. I'll set
the color to blue to show how you can change a
font property.
*/
// Find all the font tags in the row.
for (var i = 0; i<theFonts.length; i++)
{
if (theFonts.removeAttribute)
{
theFonts.removeAttribute("face");
theFonts.removeAttribute("size");
}
else
{
// Well, nulling seems to work too.
theFonts.face = "";
theFonts.size = "";
}

theFonts.color = "blue";
}
// Zap in an id
// Please note the first cell in the table
// is row1cell1.
theIds =
rows[rowsLoop].getElementsByTagName("td");
for (var j = 0; j<theIds.length; j++)
{
theIds[j].id = "row" + ( rowsLoop + 1 ) +
"cell" + ( j + 1) ;

}

} // end of loop on rows

// Display the table
if (t.style)
{ t.style.visibility = "visible"; }
else
{
alert("Oh, we have a table to display, " +
"but we cannot.");
}
}

}
</script>
</head>

<body id="documentbody" onload="adjust();">
<p>We will change this table after the page loads.</p>
<center>

<table id="mytable" cellpadding=3 cellspacing=0>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Working Capital</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">147,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>70,111.00</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>110.16</FONT></TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Net Trade Reserve Capital</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>7,345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">7,111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>11.16</FONT></TD>
<TD>&nbsp;</TD>

<TD>&nbsp;</TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Another Capital</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>345.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">111.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>1.16</FONT></TD>
<TD>&nbsp;</TD>

<TD>&nbsp;</TD>
</TR>
<TR>
<TD nowrap ALIGN="left">
<FONT FACE="Arial"
SIZE=3><IMG
SRC="http://spaceplace.nasa.gov/en/educators/images/solarsystem/idadactyl_T.jpg"
weight="10px"
height="10px"> Another Capital - last</FONT></TD>

<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>4.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3
color="red">3.00</FONT></TD>
<TD ALIGN="right">
<FONT FACE="Arial"
SIZE=3>2.16</FONT></TD>
<TD>&nbsp;</TD>

<TD>&nbsp;</TD>
</TR>
</table>
</center>

<p>The second row is not displayed.</p>
</body>

</html>
 
C

Craig

Works great Robert!

One more question . . . .

The report is dynamic and could have 10 rows or 60 rows of data.

Lets say I want the first 20 rows to have a certain style, can I loop
from 1 - 20 rather than have to edit the styles rows manually (ie.
type 20 styles), can i not just write a loop that sets the style for
all the rows?

Many thanks.
 
M

Mark

You could insert a span tag around the rows you want to be all the same
and define a style for this span.
Click to expand...

Really? IIRC <tr> elements may only be contained in <tbody> or <table>
elements. The latter implicitely creates the tbody if you specify one.
 
M

Michael Winter

Really? IIRC <tr> elements may only be contained in <tbody> or <table>
elements. The latter implicitely creates the tbody if you specify one.
Click to expand...

Correct. It also makes little sense to use a SPAN as a TR element, if
classified, would be a block-level element and it is invalid for inline
elements to contain block-level elements.

Use TBODY to group rows. That's what it's for.

Mike
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Colspan probs 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help with <rowspan> in an HTML table 1
Sort by number of characters 1
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
Can anyone please help? HTML - two tables applying different styles 4
HTML Table Issue 2
Bootstrap contact form not working 2

Members online

No members online now.
Total: 152 (members: 0, guests: 152)
Robots: 425

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top