Toon posts:

[CSS] Table / TD / TR replace

Pagina: 1
Acties:

woensdag 16 maart 2005 11:21

Acties:

Verwijderd

Topicstarter
Hoi,

Na een half uur zoeken op GoT en google (onder werktijd) heb ik niks bruikbaars gevonden.
Vandaar dit topic.

ik heb een forum ontwikkeld zie http://forum.noudan.nl

Nu gaat het omlaag scrollen heel traag, ik denk persoonlijk niet door de database.
Maar door het elke keer 'opnieuw' laden van tables.
Iedereen zegt altijd, geen tables gebruiken.. maar /me is eigenwijs

Nu ben ik beetje gaan zoeken, en rond snuffelen.
Nu weet ik hoe het een beetje werkt.


code:
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
46

<style type="text/css">

#main
{
position: absolute;
left: 0px;
width: 100%;
border-styole: solid;
border-color: white;
border-width: 0px 0px 0px 0px;

}


#id0
{
position: absolute;
left: 25px;
}

#id1
{
position: absolute;
left: 0px;
}

#id2
{
position: absolute;
left: 0px;
width: 40px;
}
#id3
{
position: absolute;
left: 0px;
width: 40px;
}
#id4
{
position: absolute;
left: 0px;
width: 125px;
}

</style>


Nu krijg je een table die als het goed is 100% is?

Bedoeling is bv:


code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table width="100%" height="20"  border="0" cellpadding="0" cellspacing="0" class="bold">
  <tr>
    <td width="1">&nbsp;</td>
    <td width="25">&nbsp;</td>
    <td width="1">&nbsp;</td>
    <td align="center">forum</td>
    <td width="1">&nbsp;</td>
    <td width="40" align="center">topics</td>
    <td width="1">&nbsp;</td>
    <td width="40" align="center">posts</td>
    <td width="1">&nbsp;</td>
    <td width="125">&nbsp;</td>
  </tr>
</table>


Bovenstaande code kan ik ook gebruiken om forums neer te zetten.


Naar heeeel veel rondsnuffelen kwam ik ook iets tegen van

code:
1
2
3
4
5
6
7
8
9
10

<div id="id0">
 <div id="id1">
    <div id="id2">
      <div id="id3">
        <div id="id3">
        </div>
     </div>
   </div>
 </div>
</div>


maar hoe vergelijk ik dit met tables?

Of kan dit beter?

Alvast bedankt

woensdag 16 maart 2005 11:29

Acties:
  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024

faabman

als je nou het geheel omzet naar 1 tabel ipv 1 tabel met meerder onderliggende tabellen...

speel dan eens wat met thead / tbody / tfoot en th / td en css / classes

kijk gewoon eens in de source van GoT :)

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 16 maart 2005 11:43

Acties:
  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Een forum is tabulair, dus tabellen gebruiken hiervoor is in mijn ogen prima. Ik zou zoals faabman al zegt eens kijken naar THEAD, TBODY, TFOOT. Verder zo min mogelijk opmaak aan de tabel zelf hangen (meeste via CSS), zorgen dat de tabel niet te lang wordt (max. 50 reacties ofzo).

Oh, en kijken in de bron van GoT kan, deze (de nieuwe bruin/witte) is geheel opgebouwd uit ook gebruik gemaakt van DIVs, hier kan je ook eens naar kijken. Al is dat wel net ietsjes lastiger. :)

[ Voor 4% gewijzigd door OkkE op 16-03-2005 11:57 . Reden: Te snel een reactie gepost zonder te kijken.. ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 16 maart 2005 11:47

Acties:
  • We Are Borg
  • Registratie: April 2000
  • Laatst online: 22:04

We Are Borg

Moderator Wonen & Mobiliteit / General Chat
OkkE schreef op woensdag 16 maart 2005 @ 11:43:
Oh, en kijken in de bron van GoT kan, deze (de nieuwe bruin/witte) is geheel opgebouwd uit DIVs, hier kan je ook eens naar kijken. Al is dat wel net ietsjes lastiger. :)
Als crisp dit leest gaat hij (terecht) gillen. Hij heeft niet alleen divs gebruikt en de TS'er 'moet' dat ook niet doen :)

woensdag 16 maart 2005 12:00

Acties:
  • BCC
  • Registratie: Juli 2000
  • Laatst online: 23:57

BCC

Gooi alle <table> en </table> 's eens weg behalve de eerste en de laatste en zet een colspan=x bij de td van je titels in.. Ik denk dattie dan een stuk sneller is.

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

woensdag 16 maart 2005 12:02

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Laatst online: 21:37

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Je tabellen kloppen sowieso niet. Nou ja, ze kloppen wel, maar voor zowat elke regel maak je een nieuwe tabel. Dit kan natuurlijk net zo goed in 1 tabel. Dat zal al een hoop schelen.

Verder is (vermoed ik) style="background-attachment: fixed" de boosdoener. De achtergrond scrollt niet mee, dat zorgt vaak voor vertragingen. Overigens is de achtergrond egaal blauw dus zou ik het er sowieso niet neerzetten 8)7

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

woensdag 16 maart 2005 12:15

Acties:

Verwijderd

Topicstarter
hmmm bedankt,
maar aangezien ik gewoon helemaal wil overstappen op CSS/DIV.

Daarom vroeg ik me af of dit mogelijk is dmv divs

code:
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<html>
<head>

<style type="text/css">

#main
{
position: absolute;
left: 0px;
width: 100%;
border-styole: solid;
border-color: white;
border-width: 0px 0px 0px 0px;

}


#id0
{
position: absolute;
left: 5px;
width: 20px;
background-color: red;
}

#id1
{
position: absolute;
left: 22px;
width: 528px;
background-color: blue;
}

#id2
{
position: absolute;
left: 529px;
width: 40px;
background-color: yellow;
}

#id3
{
position: absolute;
margin-left: 1px
width: 40px;
background-color: green;
}
#id4
{
position: absolute;
margin-left: 1px
width: 125px;
background-color: black;
}

</style>
</head>
<body>
<div id="main">
<div id="id0">
id0
 <div id="id1">
id1
    <div id="id2">
id2
      <div id="id3">
id3
        <div id="id4">
id4
        </div>
     </div>
   </div>
 </div>
</div>
</div>


</body>
</html>


http://www.noudan.nl/test.html

alleen snap ik niet.. waarom moet ik bij de eerste 2 (id1 / 2) opgeven:

code:
1
2
3
4
5

left: 22px;
width: 528px;

left: 529px;
width: 40px;


maar bij 3 of 4 hoeft dat niet om te werken?

[ Voor 31% gewijzigd door Verwijderd op 16-03-2005 12:31 ]

woensdag 16 maart 2005 12:29

Acties:
  • RwD
  • Registratie: Oktober 2000
  • Niet online

RwD

kloonikoon

ik weet niet precies wat ieder id voor stelt. Misschien een beter voorbeeld plaatsen??

En voor het topicoverzicht niet je table weg gaan gooien heh ;)

[ Voor 3% gewijzigd door RwD op 16-03-2005 12:29 ]

woensdag 16 maart 2005 12:30

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Laatst online: 21:37

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Als je div's zo gaat gebruiken, gebruik je ze als tabellen, en kun je beter tabellen gebruiken. Dingen als een forum-index of topic-list, zijn gewoon tabulaire data. Een topic bekijken is wat anders. Maar gebruik de elementen waar ze voor zijn.

Een stukje uit bijv. een topiclist:
code:
1
2
3
4
5
6
7

<table id="topiclist">
<tr>
  <td class="title">woei</td>
  <td class="posts">49</td>
  <td class="lastpost">gisteren</td>
</tr>
</table>


Cascading Stylesheet:
1
2
3
4

table#topiclist { width: 800px; border-collapse: collapse; }
table#topiclist td.title { width: 600px; background-color: pink; }
table#topiclist td.posts { width: 100px; background-color: gold; }
table#topiclist td.lastpost { width: 100px; background-color: purple }


En zoals ik al zei: het trage scrollen komt door dat gare achtergrondplaatje dat fixed is.

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

woensdag 16 maart 2005 12:45

Acties:
  • OkkE
  • Registratie: Oktober 2000
  • Laatst online: 10-11-2025

OkkE

CSS influencer :+

Als je perse alles toch wilt oplossen met DIVs, dan zou je eens kunnen kijken naar de display: property. Daar kan je o.a. aangeven: table, table-row, table-column en table-cell. Daar zou je een heel eind mee moeten komen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 16 maart 2005 12:46

Acties:

Verwijderd

Topicstarter
hij is inderdaad sneller nu dat fixed weg is.
dus eigenlijk zou ik niks meer hoeven aan te passen?

woensdag 16 maart 2005 13:13

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Laatst online: 21:37

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Jawel, want je tabellen-zooi blijft ranzige meuk :) Probeer er 1 grote tabel van te maken ipv 10 kleine. Kijk hiervoor naar colspan.

/edit: het is overigens ook wel zo netjes om een melding te geven als er geen topics in een forum zijn gevonden. Anders lijkt het meer op een fout.

[ Voor 37% gewijzigd door Thijsmans op 16-03-2005 13:14 ]

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

donderdag 17 maart 2005 09:50

Acties:
  • RwD
  • Registratie: Oktober 2000
  • Niet online

RwD

kloonikoon

Verwijderd schreef op woensdag 16 maart 2005 @ 12:46:
hij is inderdaad sneller nu dat fixed weg is.
dus eigenlijk zou ik niks meer hoeven aan te passen?
Nou, ik weet niet zeker of het de beste manier is, maar ik zou alleen de lijst van de topics als tabel hebben, en bijvoorbeeld het vak er boven en er onder in divs. (vermoedelijk)
Pagina: 1
Reageer