Html táblázatban a cellákat hogyan tudom hozzárendelni oszlopokhoz?
Excel táblázatot exportáltam .html-be, és most a leegyszerűsítésén dolgozom (microsoft ellátta jó sok, kezelhetetlen zagyvasággal).
Maradt egy <thead> táblázatsorom, 24 db <th> elemmel.
Utána egy halom mezei <tr> sor, 24-24 db <td> adattal.
Na most a <td> elemek ugye maguktól, a beírás sorrendjében követik egymást <tr> soraikban.
A baj ott kezdődik, hogy szeretném átrendezni a <thead> sor adatait, tehát az oszlopok sorrendjét. A táblázat azonban önmagától ugye nem fog kegyeskedni követni nekem a <th> adatok felcserélését, és ott csücsülnek továbbra is a helyükön. Hát a közel 1500 db sorban pedig már csak nem fogom őket egyenként átültetni...
Html-es oldalakon olvasni az "axis" attribútumot, amit a html5 már sajna nem támogat - ez tehát kilőve (gyanús hogy ez volt a funkciója). Amit még támogat, az a "headers="id"" attribútum, amivel szépen meg lehet mutatni egy <td> adatnak, hogy melyik <th id="id">-hoz tartozik ő. De ez úgy látszik még nem elég neki, mert a <td>-m tovább ücsörög a helyén, annak ellenére hogy megmondtam neki, melyik header "id" tartozik hozzá.
Megadtam a <table>-nek, minden adat elé, a <col> elemeit,
és elláttam ugyazokkal az "id"-kkel, mint amivel a <th>-kat is, hátha velük lehet kezdeni valamit.
Ezentúl azonban nem tudom mit kéne kezdenem velük, hogy átrendeződjenek... valami az "id"-kkal van, talán valami css vagy javascript function tudná elintézni nekem, de azokból még egy kicsit kezdő vagyok...
Próbálok mindjárt beszúrni valami mintát egy hozzászólásban.
Előre is köszönöm a segítségeket!
No hát íme egy lerövidített példa, annyi a különbség, hogy az eredetiben sokkal több állat, és több oszlop van (több klád és több tulajdonság):
<html>
<head><style type="text/css">
td.clade{border-bottom:1px dotted black; border-right:1px solid black; writing-mode: tb-rl;}
</style>
</head>
<body topmargin="0" leftmargin="0" align="middle" bgcolor=#F0E68C text=#000000 link=#3366BB><font face="garamond">
<table style='border-collapse:collapse'>
<col id=”Animalia” width=19 class="clade" valign="bottom">
<col id=”clade1” width=19 class="clade" valign="bottom">
<col id=”clade2” width=19 class="clade" valign="bottom">
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<thead><tr>
<th id=”Animalia”></th>
<th id=”clade1”></th>
<th id=”clade2”></th>
<th id=”Család” colspan=2 bgcolor="indianred">Család</th>
<th id=”Név” colspan=2 bgcolor="indianred">Név</th>
<th id=”zygota”>zygota</th>
<th id=”ganglia”>ganglia</th>
<th id=”élőhely”>élőhely</th>
<th id=”bonus”></th>
</tr></thead>
<tr>
<td headers=”Animalia” rowspan=2 class="clade" valign="bottom">Animalia</td>
<td headers=”clade1” rowspan=2 class="clade" valign="bottom">Amniota</td>
<td headers=”clade2” class="clade" valign="bottom">Catarrhini</td>
<td headers=”Család”>Hominidae</td>
<td headers=”Család”>Emberek</td>
<td headers=”Név” x:fmla="=HYPERLINK(CONCATENATE(B6,".jpg"), "Ember")"><a
href="Homo%20sapiens.jpg">Ember</a></td>
<td headers=”Név>Homo sapiens</td>
<td headers=”ectoderma”></td>
<td headers=”ganglia”>neocortex</td>
<td headers="élőhely">Afrika</td>
<td></td>
</tr>
<tr>
<td headers=”clade2” class="clade" valign="bottom">Platyrrhini</td>
<td headers=”Család”>Cebidae</td>
<td headers=”Család”>Csuklyás majmok</td>
<td x:fmla="=HYPERLINK(CONCATENATE(B6,".jpg"), "Csuklyás%20majom")"><a
href="Cebus%20capucinus.jpg">Csuklyás majom</a></td>
<td>Cebus capucinus</td>
<td headers=”ectoderma”></td>
<td headers=”ganglia”>neocortex</td>
<td headers="élőhely">Amazonia</td>
<td></td>
</tr>
<tfoot><tr>
<th id=”Animalia”></th>
<th id=”clade1”></th>
<th id=”clade2”></th>
<th id=”Család” colspan=2 bgcolor="indianred">Család</th>
<th id=”Név” colspan=2 bgcolor="indianred">Név</th>
<th id=”zygota”>zygota</th>
<th id=”ganglia”>ganglia</th>
<th id=”élőhely”>élőhely</th>
<th id=”bonus”></th>
</tr></tfoot>
</table>
</body>
</html>
Hát igen, felmerül itt még több probléma is, hogy a kládokat függőlegesen szándékoznék írni, meg az exceles formázású képhivatkozás csak excelben működik stb. de ezt most hagyjuk...
Linkelek egy html-játszóteret ahol ki lehet próbázni:
hopp a col tageket így akartam (bár ez már részletkérdés):
<col id=”Animalia” width=19 class="clade" valign="bottom">
<col id=”clade1” width=19 class="clade" valign="bottom">
<col id=”clade2” width=19 class="clade" valign="bottom">
<col id="Család1">
<col id="Család2">
<col id="Név1">
<col id="Név2">
<col id="zigota">
<col id="ganglia">
<col id="élőhely">
<col id="bonus">
válasza: válasza:A <col> tag csak <colgroup>-on belül érvényesül. A szerepe az, hogy oszlopokra vonatkozó formázásokat lehessen egyszerre kezelni. Viszont a kiosztott id-k nem vonatkoztathatók a <td> elemekre (vagy viszont). A <td> elemen lévő headers attribútum hozzákapcsolja a <th> elem id-jéhez a <td> elemet, de ez sem rendezi át a táblázatot. A táblázat mindig úgy jelenik meg, ahogyan az a html szerkezetből kiolvasásra kerül. A sorrend megváltoztatására html vagy css kódokkal nincs lehetőség.
Tanácsok:
1. excel/word dokumentumot/táblázatot html-be exportálni hiábavaló foglalatoskodás, gyorsabban megvagy, ha csv-be/txt-be exportálod, és jegyzettömbben alakítod megfelelőre
2. amit te szeretnél azt adatbázis + php használatával célszerű megoldani. javascripttel is lehetséges, de egyik megoldás sem olyan egyszerű, hogy egy gyorstalpalót tudnánk itt adni
Kezdj el foglalkozni a php-vel, és megoldódik a problémád
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!