Toon posts:

[css] table header i.c.m. met een h-tag

Pagina: 1
Acties:

woensdag 22 september 2004 10:58

Acties:

Verwijderd

Topicstarter
Heeft iemand enig idee waarom ik een extra lege regel (in de header) in IE krijg als ik de onderstaande code uitvoer? Als ik overigens de a-tag of b-tag gebruik krijg ik niet zo'n extra lege regel. :?

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
thead
{
    background-color: #C1CEDF;
}

thead h1
{
    color: #30588B;
    font-size: 90%;
    font-weight: bold;
}
</style>
</head>

<body>
<table border="1">
<thead>
<tr>
<td>
    <h1>
        This text is in the THEAD
    </h1>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>This text is in the TBODY</td> 
</tr>
</tbody>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
</table>
</body>
</html>

woensdag 22 september 2004 11:02

Acties:

Verwijderd

margin?

woensdag 22 september 2004 11:05

Acties:

Verwijderd

Topicstarter
Ja je hebt gelijk. Als ik de margin op nul zet, werkt het wel. Wel vaag opzich. :?

woensdag 22 september 2004 11:11

Acties:

Verwijderd

Hoezo vaag?

woensdag 22 september 2004 11:12

Acties:
  • CrashOne
  • Registratie: Juli 2000
  • Niet online

CrashOne

oOoOoOoOoOoOoOoOoOo

Omdat Hx geen inline element is.

[ Voor 0% gewijzigd door CrashOne op 22-09-2004 11:14 . Reden: reactie op TS ]

Huur mij in als freelance SEO consultant!

woensdag 22 september 2004 11:15

Acties:
  • RM-rf
  • Registratie: September 2000
  • Laatst online: 12:10

RM-rf

1 2 3 4 5 7 6 8 9

Heading-elementen zijn niet echt bedoeld om in tabellen te gebruiken, ze zijn bedoeld voor 'platte tekst', die hooguit een structuur kennen door indelingen in paragrafen, koppen, subkopjes e.d.

zodra je een tabel gaat gebruiken, is het vaak slimmer om de structuur te laten bepalen door TABLE-tags zelf:
dus TH Thead Tbody, of CAPTION tags, die hebben een waarde binnen gestructureerde tabeldata:
De Heading-tag is hier een absoluut overbodige tag, je kunt al direkt via
TABLE THEAD TD { foo: bar; } stylen.

Natuurlijk kun je mbhv CSS iedere element er anders uit laten zien, maar dat is niet helemaal de bedoeling van HTML...

[ Voor 11% gewijzigd door RM-rf op 22-09-2004 11:17 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 22 september 2004 11:32

Acties:

Verwijderd

Topicstarter
En als ik nu twee verschillende soorten headers heb? Dan moet ik als nog een tag binnen de thead definiëren lijkt me? (Of is dat een verkeerd gebruik van HTML?)

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

tbody
{
    background-color: #EEF1F6;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-decoration: none;
}

tbody h1
{
    color: #0A3663;
    font-size: 70%;
    font-weight: normal;
    text-align: right;
    margin-top: 0px;
    margin-bottom: 0px;
}

tbody h2
{
    color: #000000;
    font-size: 70%;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

[ Voor 4% gewijzigd door Verwijderd op 22-09-2004 11:33 ]

woensdag 22 september 2004 11:35

Acties:
  • RM-rf
  • Registratie: September 2000
  • Laatst online: 12:10

RM-rf

1 2 3 4 5 7 6 8 9

Verwijderd schreef op 22 september 2004 @ 11:32:
En als ik nu twee verschillende soorten headers heb? Dan moet ik als nog een tag binnen de thead definiëren lijkt me? (Of is dat een verkeerd gebruik van HTML?)
classes?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

tbody
{
    background-color: #EEF1F6;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-decoration: none;
}

tbody td.tekst1
{
    color: #0A3663;
    font-size: 70%;
    font-weight: normal;
    text-align: right;
    margin-top: 0px;
    margin-bottom: 0px;
}

tbody td.tekst2
{
    color: #000000;
    font-size: 70%;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px;
}

Overigens ligt het een beetje aan je code:
Je kunt je afvragen waarom de tekstkleur moet veranderen, als dat is omdat de tekst een heel verschillende waarde heeft, moet je je afvragen of de HTML-structuur anders moet, voor lichte layouttechnische verschillen voldoet een class echter wel.

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 22 september 2004 11:44

Acties:

Verwijderd

Topicstarter
Okee. I see..
Pagina: 1
Reageer