ugrás a tartalomhoz

Táblázat készítése HTML-ben

kalikim · 2010. Júl. 16. (P), 10.34
Sziasztok!

Én szeretnék egy igényes táblázatot készíteni a honlapomra, viszont most egy kicsit elakadtam a szerkesztés közben. Az a problémám, hogy nem tudom rögzíteni sem a táblázat sem a cellák méretét, mert valamelyik mindig megváltozik, amin szöveget írok bele. Nincs esetleg valami parancs, amely nem engedi, hogy megváltozzanak a megadott méretek? Jelenleg itt tartok, lehet hogy egy kicsit bonyolultnak tűnik majd amit csináltam, de sajnos nem tudom egyszerűbben. Segítséget előre is köszönöm.

Köszönettel:
Kalikim
‹ Internet explorer használatánál eltérően működő onclick esemény javascript kép frissítése ›
 ■
1

Width és height

Kevlar · 2010. Júl. 16. (P), 13.59
A táblázat magasságát és szélességét fix-en be tudod lőni. A cellák széllessége és magassága függ a benne lévő tartalomtól, de ha biztosan tudod, hogy mi kerül bele az egyes oszlopokban, akkor azoknak is adhatsz méreteket.
Ilyenkor nem szabad megváltoznia.
Ha nem tudod kontrollálni, hogy mi kerül a cellákba (pl a user beletölthet egy "bármekkora" képet), akkor tehetsz a cellákba egy-egy div-et ami szintén fix méreteket kap, és aztán egy overflow: hidden meggátolja, hogy szétcsússzon a táblázat.
2

Köszönöm a segítséget

kalikim · 2010. Júl. 16. (P), 14.18
Tehát a <table width="480" cellspacing="0"> sorban meg kell adnom egy height értéket. Az lenne még a kérdésem, hogy az alább lévő kódban első ránézésre van-e valami hiba? Illetve meg lehet-e oldani egyszerűbben? A választ előre is köszönöm.
    
<div id="snow">
    <table width="480" cellspacing="0">
  <tr>
    <th scope="col" colspan="4" height="34" class="snowheader">Szlovák sípályák hójelentése</th>
  </tr>
  <tr>
    <th scope="col" width="160" height="27"class="snowheader1">sípályák</th>
    <th scope="col" width="220" class="snowheader1">sípályák hossza</th>

    <th scope="col" width="30" class="snowheader1">&nbsp;</th>
    <th scope="col" width="70" class="snowheader1">cm</th>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Chopok-Dél</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 2,1 km <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 6,5 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 1,5 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Chopok-Észak</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 4,9 km <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 10 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 9,2 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Csorba-tó</th>
    <td class="snow"><img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 6 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 1,3 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Donovaly</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 100 m <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 5,1 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 5 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Lomnici-csúcs</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 2,6 km <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 3,2 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 2,8 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Martinske Hole</th>
    <td class="snow"><img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 3 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 3,7 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Ruzomberok</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 2 km <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 6,5 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 2 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Velka Raca</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 1,5 km <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 6,1 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 4,8 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
  <tr>
    <th scope="row" height="25" class="snow">Vratna</th>
    <td class="snow"><img valign="baseline" title="nehéz pálya" border=0 src="snow_black.png"> 2,6 km <img valign="baseline" title="közepes pálya" border=0 src="snow_red.png"> 4,9 km <img valign="baseline" title="könnyű pálya" border=0 src="snow_blue.png"> 1,3 km</td>

    <td class="webcam"><img border=0 src="webcam.png"></td>
    <td class="snow_height">-</td>
  </tr>
	<tr>
    <th scope="col" colspan="4" height="25">&nbsp;</th>
  </tr>
    </table>
	</div>
3

Class

Kevlar · 2010. Júl. 16. (P), 15.52
Ha úgyis minden TD-nek van class-a, akkor megadhatod a szélességet és magasságot CSS-ből is. Ugyanígy a táblázatnál is.
A lényeg, hogy a cellák szélességének összege, padding-el és border-el együtt legyen egyenlő a táblázat szélességével.
Érdemes a cellpadding, celspacing és border tulajdonságokat 0-ra állítani, ha csak a CSS-ből fogsz méretezni.
4

Köszönöm!

kalikim · 2010. Júl. 19. (H), 09.27
Nagyon köszönöm a választ, megpróbálkozom vele.