Re: How to add a text into a table as e.g. <h5>

CSS class names must not contain underlines.

Ups, I didn't know. That means I have to replace all '_' with e.g. '-'. The
character '-' is fine? Correct?
But in JavaScript functions I can use '_'. Correct?

font-size: 8pt;

`pt' is a unit suited for printouts, not for display devices.

Hmm, I'd like to have an unit for one pixel on the screen. But I guess it
doesn't exist except 'px' which is buggy in IE like you explained.

tr
td width = "40%" style = "background-color:#ff8800"
h5 class = "style_tabletitle">Title leftMiddle</h5
/td

td width = "30%" style = "background-color:#cc0000"
h5 class = "style_tabletitle">Title leftMiddle</h5
/td

td width = "30%" style = "background-color:#cc0000"
h5 class = "style_tabletitle">Title leftMiddle</h5
/td
/td
/tr

Headings (`hX' elements with X = [1..6]) should not be abused to achieve
greater font sizes. They should reflect the structure of the document
instead. If a different font size is needed, use the CSS font*
properties.

I use 'hX' only that I can address the appropriate text like
h5.style_tableentry_middle

You have written so many hints and I'm still not through in fixing all my
faults on my page. However, I still don't know what I have to change so that
the added cells (with the JavaScript) do have the same style as the first
row which I added by HTML.

In any case, thanks a lot for all your corrections and hints and if you
could give me a little bit more specific hint in how to solve my problem I
really would be glad.

Thanks again
Stefan

Stefan Mueller wrote:

The character '-' is fine [for CSS class names]? Correct?
But in JavaScript functions I can use '_'. Correct?

Correct, as CSS2 Grammar and JavaScript Reference/ECMAScript 3 Specification
say.

tr
td width = "40%" style = "background-color:#ff8800"
h5 class = "style_tabletitle">Title leftMiddle</h5
/td

td width = "30%" style = "background-color:#cc0000"
h5 class = "style_tabletitle">Title leftMiddle</h5
/td

td width = "30%" style = "background-color:#cc0000"
h5 class = "style_tabletitle">Title leftMiddle</h5
/td
/td
/tr

Headings (`hX' elements with X = [1..6]) should not be abused to achieve
greater font sizes. They should reflect the structure of the document
instead. If a different font size is needed, use the CSS font*
properties.

I use 'hX' only that I can address the appropriate text like
h5.style_tableentry_middle

You probably should not. You do not need a specific element just to
format text. For example, if you left out the `h5' part in your CSS
rule, it would apply to almost any element that has the `class'
attribute and the value `style_tableentry_middle' (which should be
`style-tableentry-middle'). The difference with the `hX' block elements
is that those element have structural meaning beyond their display (e.g.
for application of outlines and automatically generated list of contents),
so use them wisely. And there are more possibilities for selectors than
just classname-based ones: <http://www.w3.org/TR/CSS2/selector.html>.

So, IMHO, a document may have more than `h5' element but not within
juxtapositioned table cells. If you would describe why you find this
necessary, I'll probably have a suggestion better suited to your
approach.

But that really belongs into a CSS newsgroup
(comp.infosystems.www.authoring.stylesheets or
de.comm.infosystems.www.authoring.misc), or in
private e-mail communication (with me also in
German, if you like).

You have written so many hints and I'm still not through in fixing all my
faults on my page. However, I still don't know what I have to change so
that the added cells (with the JavaScript) do have the same style as the
first row which I added by HTML.

See <http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>.

In any case, thanks a lot for all your corrections and hints

You're welcome.

and if you could give me a little bit more specific hint in how to solve
my problem I really would be glad.

Unless your document is all Valid and one has seen all your code, one can
only make wild guesses. Make it Valid, post the URI of that test case and
I, too, will be happy to help again -- if still necessary


Regards,
PointedEars

...
div class = "style-tabletitle">Title left</div
...

or
...
p class = "style-tabletitle">Title left</p
...

or something else... You need a tag.

Yea, I also think I need a tag. And now we are back to my initial problem.

I can add everything with the JavaScript what I do with HTML (please see my
first post) except that the added text with the JavaScript is not with the
'h5' tag like
<h5 class = "style-tabletitle">Title left</h5>

With the JavaScript I can add only
<class = "style-tabletitle">Title left

But like we figured out, I do need a tag. Or does someone know a solution
without a tag?

My question is still, how to add this tag with a JavaScript?
Stefan

Stefan Mueller wrote:

Please learn how to quote, including proper attribution:
<http://jibbering.com/faq/>
vvvvvvvvvvvvvvvvvvvvvvvvvvv

...
div class = "style-tabletitle">Title left</div
...

or
...
p class = "style-tabletitle">Title left</p
...

or something else... You need a tag.

Yea, I also think I need a tag. And now we are back to my initial problem.

You need an element, not only a tag. An element has a start tag and
can have an end tag, which both can be optional, and it may have content
(otherwise its content model is called EMPTY).

Example
--------

The declaration of the `p' element in the HTML 4.01 Transitional Document
Type Definition (DTD):

<!ELEMENT P - O (%inline* -- paragraph -->
<!ATTLIST P
%attrs; -- %coreattrs, %i18n, %events --
%align; -- align, text alignment --

`p' is an ([X]HTML) element. It's (element) type is P.
It has the start tag `<p ...>' and the end tag `</p>' which enclose its
content. In HTML 4.01 Transitional, the end tag is optional ("O"; in
which case the content ends e.g. at the next `<p ').
The element has inline content, meaning that its content may include
text nodes with entity references and "inline" elements, but e.g. no
`p' elements (as `p' is a "block" element).

It is important to understand the difference between elements and tags
in order to understand how CSS works when applied to structural markup.

I can add everything with the JavaScript what I do with HTML (please see
my first post) except that the added text with the JavaScript is not with
the 'h5' tag like
h5 class = "style-tabletitle">Title left</h5

With the JavaScript I can add only
class = "style-tabletitle">Title left

No, the script insert a row

xrow = xtable.insertRow(2)

inserts a cell to this row

xcell = xrow.insertCell(1)

provides it with `style' and `class' attributes

xcell.style.width = "30%"
xcell.className = "style_tableentry_middle"

and a content

xcell.innerHTML = "My entry middle"

The result (which can be seen e.g. in Firefox when using the
View Selection Source feature) is

<tr>
<td style="width:30%" class="style_tableentry_middle">My entry
middle</td>
</tr>

which is not quite what you expected above.

But like we figured out, I do need a tag. Or does someone know a solution
without a tag?

In a structural markup language like HTML, you cannot format content without
an element that contains it. So you either format an existing element
(like the `td' element, see above) which contains to content, or you add a
formatted child element which contains it.

But still, tables and `h5' are probably not what you are looking for in the
first place.

My question is still, how to add this tag with a JavaScript?

You can add child elements in several ways, depending on the level of
support for a respective DOM. To add a `p' element as child of another
element which DOM representation objects is referred by `x', one W3C DOM
Level 2 (standards compliant) approach could be (untested)

function isMethod(o)
{
if (typeof o == "string")
{
o = eval(o);
}

var t;
return ((t = typeof o) == "function" || t == "object" && o);
}

// x has been assigned an HTMLElement object reference earlier

var p, t;
if (isMethod("x.appendChild") // feature test
&& isMethod("document.createElement") // feature test
&& (p = document.createElement("p"))) // object reference test
{
p.className = "style-tabletitle";

if (isMethod("p.appendChild") // feature test
&& isMethod("document.createTextNode") // feature test
&& (t = document.createTextNode("My entry middle"))) // ref. test
{
p.appendChild(t);
}

x.appendChild(p);
}

The resulting markup would be

<x><p class="style-tabletitle">My entry middle</p></x>

(The type of the `x' element would of course be that of the element
represented in the DOM by the object referred to by `x' above.)

This of course requires the markup and style sheet it is applied to
to be Valid.


HTH

PointedEars

First of all many thanks for your great explanations and your help. I really
appreciate it very much.

The result (which can be seen e.g. in Firefox when using the
View Selection Source feature) is

tr
td style="width:30%" class="style_tableentry_middle">My entry
middle</td
/tr

Wow, that's really a very nice feature. Thanks for telling me.

I'm really surprised that the class statement goes to the <td> and not to
the text line as I expected.

I tried to insert your code into my insertRow function (only for the middle
column) but it doesn't work.
I get the error message: 'x is not defined' what is of course correct. But
I've no idea how to define it.
I guess 'x' has to be the same letter like in
x.style-tableentry-middle {
Correct?

Here is my code (only the Javascript part, the whole code is in my first
post):

===========================
function InsertRow() {
var xtable
var xrow
var xcell

xtable = document.getElementById("MyTable")

// Add row
xrow = xtable.insertRow(2)
xrow.className = "style-tableentry-background"
xrow.onmouseover = function() {this.className =
"style-tableentry-mouseover"}
xrow.onmouseout = function() {this.className =
"style-tableentry-background"}

// Add cell left
xcell = xrow.insertCell(0)
xcell.style.width = "40%"
xcell.bgColor = "#ff8800"
xcell.innerHTML = ""

// Add cell middle
xcell = xrow.insertCell(1)
xcell.style.width = "30%"
// xcell.className = "style-tableentry-middle"
// xcell.innerHTML = "My entry middle"

var p, t;
if (isMethod("x.appendChild") // feature test
&& isMethod("document.createElement") // feature test
&& (p = document.createElement("p"))) { // object reference test
p.className = "style-tableentry-middle";

if (isMethod("p.appendChild") //
feature test
&& isMethod("document.createTextNode") //
feature test
&& (t = document.createTextNode("My entry middle"))) { // ref.
test
p.appendChild(t);
}
x.appendChild(p);
}

// Add cell right
xcell = xrow.insertCell(2)
xcell.style.width = "30%"
xcell.className = "style-tableentry-right"
xcell.innerHTML = "My entry right"
}

function isMethod(o) {
if (typeof o == "string") {
o = eval(o);
}

var t;
return ((t = typeof o) == "function" || t == "object" && o);
}
===========================

It would be really great if you or someone else could give me some further
help because with my knowledge I'm not able to handle it.
Stefan

Stefan Mueller wrote:

First of all many thanks for your great explanations and your help. I
really appreciate it very much.

I'm glad to read that; if only you would appreciate it in the way I'd like
to think of it (and no, although that would be nice too, that's NOT mainly
financial compensation for it; see below). Sigh. [psf 10.1]

The result (which can be seen e.g. in Firefox when using the
View Selection Source feature) is

tr
td style="width:30%" class="style_tableentry_middle">My entry
middle</td
/tr

Wow, that's really a very nice feature. Thanks for telling me.

I'm really surprised that the class statement goes to the <td> and not to
the text line as I expected.

Well, it's quite obvious from the source code, even without any DOM
experience. The property identifiers used are self-explaining after all.

I tried to insert your code into my insertRow function (only for the
middle column) but it doesn't work.
I get the error message: 'x is not defined' what is of course correct. But
I've no idea how to define it.

For example using document.getElementById() if the `x' element had an ID.
Please look into publicly available DOM documentations already mentioned.
These are very basic questions and, frankly, asking them repeatedly does
not make you look very smart.

I guess 'x' has to be the same letter like in
x.style-tableentry-middle {
Correct?

You do not have to provide the element type for a selector, the class name
suffices here. Please read the first chapters of the CSS2 specification
and other publicly available documentation about CSS, this is off-topic
here.

Here is my code (only the Javascript part, the whole code is in my first
post):

===========================
function InsertRow() {

Still the identifier starts with a capital letter although the method is
not a constructor. As I already mentioned, it's not a syntax error, of
course, but a matter of code style.

var xtable

Still you do not end statements with a semicolon. Another sign of
discouraged code style.

[...]
xtable = document.getElementById("MyTable")

// Add row
xrow = xtable.insertRow(2)

Still you don't do feature tests consequently which is potentially harmful.

[...]
xcell.style.width = "40%"
xcell.bgColor = "#ff8800"

`bgColor' is a proprietary attribute and property. Use

xcell.style.backgroundColor = "#f90";

instead and be sure to also define the foreground color with the `color'
property. <http://www.w3.org/QA/Tips/color>

[...]
var p, t;
if (isMethod("x.appendChild") // feature test
&& isMethod("document.createElement") // feature test
&& (p = document.createElement("p"))) { // object reference
test

Code should be executable as posted. The `test' belongs to the single-line
comment before.

[...]
if (isMethod("p.appendChild") //
feature test

Same here. Just copy'n'pasting (my) code (BTW without even mentioning
it's originated from me, which I find rather offensive!) without really
trying to understand what it does will not help you in the mid-term.

[...] because with my knowledge I'm not able to handle it.

So read, get informed, try and learn, as everybody else now considered
competent once did. This newsgroup (and me) is not a machine producing
error corrections and sophisticated source code at no effort on your side.
That said, I can only hope your sender address does not reflect your
attitude about this.


PointedEars

P.S.
Unfortunately, one cannot contact you privately via e-mail:

<seekware-remove- (AT) yahoo (DOT) com>:
67.28.113.10_failed_after_I_sent_the_message./Remote_host_said:_554_delivery_error:_dd_This_user _doesn't_have_a_yahoo.com_account_(seekware-remove- (AT) yahoo (DOT) com)_[-14]_-_mta103.mail.re2.yahoo.com/

Forging headers is a disregardment of Netiquette and a violation of
Internet Standards. It helps spammers instead of fighting them. I
will no longer read your postings or reply to them until you stop
this kind of network abuse.

Code should be executable as posted. The `test' belongs to the
single-line
comment before.

I copied your code like you posted it. It must be my newsreader who did
these line breaks.
If you have not much knowlegde (like me) so you always use the posted code
before you modify it.

Unfortunately, one cannot contact you privately via e-mail:

seekware-remove- (AT) yahoo (DOT) com>:
67.28.113.10_failed_after_I_sent_the_message./Remote_host_said:_554_delivery_error:_dd_This_user _doesn't_have_a_yahoo.com_account_(seekware-remove- (AT) yahoo (DOT) com)_[-14]_-_mta103.mail.re2.yahoo.com/

At the beginning I used my real e-mail address. Within one month I got
countless spam mails because of tool which scan the newsgroups for email
addresses. So I was told to use something in the e-mail address
like -remove- so every human being can contact you but not a machine. I
think this is quite common.
I really don't know why you didn't remove the -remove- part.

Stefan