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.
  1.       
  2. <div id="snow">  
  3.     <table width="480" cellspacing="0">  
  4.   <tr>  
  5.     <th scope="col" colspan="4" height="34" class="snowheader">Szlovák sípályák hójelentése</th>  
  6.   </tr>  
  7.   <tr>  
  8.     <th scope="col" width="160" height="27"class="snowheader1">sípályák</th>  
  9.     <th scope="col" width="220" class="snowheader1">sípályák hossza</th>  
  10.   
  11.     <th scope="col" width="30" class="snowheader1">&nbsp;</th>  
  12.     <th scope="col" width="70" class="snowheader1">cm</th>  
  13.   </tr>  
  14.   <tr>  
  15.     <th scope="row" height="25" class="snow">Chopok-Dél</th>  
  16.     <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>  
  17.   
  18.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  19.     <td class="snow_height">-</td>  
  20.   </tr>  
  21.   <tr>  
  22.     <th scope="row" height="25" class="snow">Chopok-Észak</th>  
  23.     <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>  
  24.   
  25.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  26.     <td class="snow_height">-</td>  
  27.   </tr>  
  28.   <tr>  
  29.     <th scope="row" height="25" class="snow">Csorba-tó</th>  
  30.     <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>  
  31.   
  32.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  33.     <td class="snow_height">-</td>  
  34.   </tr>  
  35.   <tr>  
  36.     <th scope="row" height="25" class="snow">Donovaly</th>  
  37.     <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>  
  38.   
  39.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  40.     <td class="snow_height">-</td>  
  41.   </tr>  
  42.   <tr>  
  43.     <th scope="row" height="25" class="snow">Lomnici-csúcs</th>  
  44.     <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>  
  45.   
  46.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  47.     <td class="snow_height">-</td>  
  48.   </tr>  
  49.   <tr>  
  50.     <th scope="row" height="25" class="snow">Martinske Hole</th>  
  51.     <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>  
  52.   
  53.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  54.     <td class="snow_height">-</td>  
  55.   </tr>  
  56.   <tr>  
  57.     <th scope="row" height="25" class="snow">Ruzomberok</th>  
  58.     <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>  
  59.   
  60.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  61.     <td class="snow_height">-</td>  
  62.   </tr>  
  63.   <tr>  
  64.     <th scope="row" height="25" class="snow">Velka Raca</th>  
  65.     <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>  
  66.   
  67.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  68.     <td class="snow_height">-</td>  
  69.   </tr>  
  70.   <tr>  
  71.     <th scope="row" height="25" class="snow">Vratna</th>  
  72.     <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>  
  73.   
  74.     <td class="webcam"><img border=0 src="webcam.png"></td>  
  75.     <td class="snow_height">-</td>  
  76.   </tr>  
  77.     <tr>  
  78.     <th scope="col" colspan="4" height="25">&nbsp;</th>  
  79.   </tr>  
  80.     </table>  
  81.     </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.