PDA

Click to See Complete Forum and Search --> : Why is used on some websites also <tbody>?

toplisek
12-14-2008, 01:50 PM
Why is used on some websites also <tbody>?
Fang
12-14-2008, 02:12 PM
A table may contain several tbody elements, making it possible to reference or apply css to each tbody section.
When using the DOM to alter a table the tbody must be explicitly included, a well formed table.
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
toplisek
12-14-2008, 02:35 PM
How to make make css specifications for each tbody?
Fang
12-14-2008, 02:50 PM
To change the first tbody child elements:document.getElementsByTagName('tbody')[0].style.color='red';
toplisek
12-14-2008, 03:22 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>

</td>
<td>

</td>
</tr>
</tbody></table>
my Body content................................................
</body>

</html>



Thank you.

Where to put your code and how?
document.getElementsByTagName('tbody')[0].style.color='red';
Fang
12-14-2008, 03:31 PM
It's JavaScript
toplisek
12-15-2008, 05:10 AM
Is this correct?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<style type="text/css">
/*<![CDATA[*/
body {
font-family: Verdana,Arial;
font-size:10pt;
}
h2 {
font-family: Arial, helvetica, sans-serif;
font-size: 13pt;
font-weight: normal;
color: #333333;
line-height: 13pt;
}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
/* this is styles_printing1.css
.h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #FF9900;
font-weight: bold;
}
*/
/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
document.getElementsByTagName('tbody')[0].style='styles_printing1.css';
/*]]>*/
</script>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- Start tBody css and content -->
<tbody><tr>
<td>
<h1>My Sample printing page</h1>
</td>
<td align="right" valign="top">
<a href="...">Print&nbsp;this&nbsp;page</a>

</td>
</tr>
</tbody><!-- End tBody css and content --> </table>
<!--Start SSI -->
<!-- Body css and content -->
<h2>How to make printing page?</h2>
My first printing page, <a href="http://www.mydomain">My domain and its page will be printed</a>
</body>

</html>
Fang
12-15-2008, 07:53 AM
No, you can't add a document to style.
The content of styles_printing1.css could be:tbody {color:red;}
Unfortunately targeting only the first tbody (http://www.w3.org/TR/css3-selectors/#nth-child-pseudo) using css does no work x-browser, although :first-child (http://www.w3.org/TR/css3-selectors/#first-child-pseudo) may work in some cases.
toplisek
12-15-2008, 08:11 AM
How to add than h1 or other style to tbody if not possible another document?
Fang
12-15-2008, 08:33 AM
:confused: It would be better to read about style sheets (http://www.brainjar.com/css/using/) first, then ask if there are still problems.
Charles
12-15-2008, 12:12 PM
A table may contain several tbody elements, making it possible to reference or apply css to each tbody section.
When using the DOM to alter a table the tbody must be explicitly included, a well formed table.
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3It's an important point, though, that while in XHTML TABLEs may contain TBODYs, in HTML they must contain at least one. But in HTML the TBODY tags are optional. This means that if you are in HTML or the browser thinks that you are, the browser will insert that TBODY element even if you think that you are omitting it. This can trip you up if you are trying to find a particular element with JavaScript. Best to always explicitly include at least one TBODY.
toplisek
12-15-2008, 03:27 PM
Best to always explicitly include at least one TBODY.

How to add in my code tbody and css with h1?
simple question...without javascript
Charles
12-15-2008, 05:01 PM
The simple, and only acceptable, solution is to get rid of the TABLE. TABLEs are for ordering tabular data and not for layout. Start with your page and its content properly marked up according to the meaning of everything and then come back and we'll help you use CSS to get the display that you want.
Fang
12-16-2008, 02:19 AM
How to add in my code tbody and css with h1?
simple question...without javascriptGive an example of what you are attempting.
toplisek
12-16-2008, 02:36 AM
I have posted code (12-14-2008 09:22 PM). I would like to make
1. link with print button (see Print&nbsp;this&nbsp;page)
2. use h1 specification within tbody (predefined content) for all pages.
(see <!-- Start tBody css and content --)
3. make all pages and its content included in body
<!-- Body css and content -->
4. using SSI
(see <!--Start SSI -->)
Fang
12-16-2008, 03:09 AM
1. Use @media print rule (http://www.w3.org/TR/CSS2/media.html); every browser has a print button. This is an accessible approach.

2. As Charles has already mentioned, don't use tables for layout (http://www.hotdesign.com/seybold/)

3. 4. SSI include: http://bignosebird.com/sdocs/include.shtml
toplisek
12-16-2008, 04:54 AM
I have modified printing page with div elements and added @media rule within print.css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="stylesheet" media="print, handheld" href="print.css" type="text/css" />
</head>

<body>
<div id="content-printing1a">
<h1>My sample page</h1>
</div>
<div id="content-printing1b">
<a href="...">E-mail this article</a><br />
<a href="...">Print&nbsp;this&nbsp;page</a>
</div>
<div id="content-printing1c">
<!-- this will be printed content file and included like <?PHP include("/file.txt");?> -->

<h3>How to make printing page?</h3>
<p>
My first printing page, <a href="http://www.mydomain">My domain and its page will be printed.</a><br />
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
</div>
<div id="content-printing1d">
<img src="images/content_printing1_04.png" width="141" height="190" alt="" />
</div>
<div id="content-printing1e">
<img src="images/content_printing1_05.png" width="141" height="20" alt="" />
</div>
<div id="content-printing1f">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
</div>
<div id="content-printing1g">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
</div>
</body>


and added css:


body {
font-family : Verdana, Arial;
font-size : 10pt;
}
h2 {
font-family : Arial, helvetica, sans-serif;
font-size : 13pt;
font-weight : normal;
color : #333333;
line-height : 13pt;
}
#content-printing1a {
position : absolute;
background-image : url(../images/content_printing1_01.png);
left : 0;
top : 0;
width : 791px;
height : 146px;
}
#content-printing1a h1 {
font-family : Arial, Helvetica, sans-serif;
font-size : 14pt;
color : #ff9900;
font-weight : bold;
}
#content-printing1b {
position : absolute;
background-image : url(../images/content_printing1_02.png);
left : 791px;
top : 0;
width : 216px;
height : 146px;
text-align : right;
}
#content-printing1b h2 {
font-family : Arial, Helvetica, sans-serif;
font-size : 14pt;
color : #ff9900;
font-weight : bold;
}
#content-printing1c {
position : absolute;
background-image : url(../images/content_printing1_03.png);
left : 0;
top : 146px;
width : 866px;
height : 210px;
}
#content-printing1c p {
vertical-align : top;
}
#content-printing1c h1 {
font-family : Arial, Helvetica, sans-serif;
font-size : 14pt;
color : #0066cc;
font-weight : bold;
vertical-align : top;
}
#content-printing1d {
position : absolute;
background-image : url(../images/content_printing1_04.png);
left : 866px;
top : 146px;
width : 141px;
height : 190px;
}
#content-printing1e {
position : absolute;
background-image : url(../images/content_printing1_05.png);
left : 866px;
top : 336px;
width : 141px;
height : 20px;
}
#content-printing1f {
position : absolute;
background-image : url(../images/content_printing1_06.png);
left : 0;
top : 356px;
width : 1007px;
height : 507px;
}
#content-printing1f p {
vertical-align : top;
}
#content-printing1g {
position : absolute;
background-image : url(../images/content_printing1_07.png);
left : 0;
top : 863px;
width : 1007px;
height : 61px;
}



with print css:

@media print {
.h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
color: #FF9900;
font-weight: bold;
}
}