rätt proportioner på en cell

5 svar · 405 visningar · startad av daniel_ra 16 dec. 2003

daniel_raMedlem sedan jan. 2002381 inlägg

Frågan16 dec. 2003 01:42#1

Om jag med css vill skapa en tabell som är lika hög som den är bred samt att alla celler i tabellen är lika höga som breda, hur beter jag mig då.
Låt säga att jag har en tabell som jag vill skall vara 20 * 20 px, i denna har jag två kolumner och två rader, dvs fyra celler. För att då få cellerna att vara 10*10 så att de fyller ut hela tabellen tyckte jag på något vis att det mest rimliga vore att sätta höjden på tabellen till 20 px, bredden till 20 px och göra likadant med cellerna fast då 10 px istället.. missar jag någonting här ..hmm

blir glad om någon kan förklara =)

jarvkloMedlem sedan juli 20013 378 inlägg

16 dec. 2003 10:35#2

Hmm...

20*20px med fyra celler är ganska pyttigt...
Då får man bl.a. tänka på att se till att t.ex.  (eller vad man nu har för innehåll) inte blir större än cellernas 10px och därmed expanderar dem ! ;)

Såhär kan du göra "kokboksmässigt" (se även kommentarerna i CSS:en ;) )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
  <title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
table {
  border-collapse:collapse; /* Bort med mellanrum mellan cellerna */ 
  border:none;  /* border-bredden läggs till utöver höjd/bredd */
  padding:0; /* Bort med mellanrum mellan kant och cell */
}
td {
  height:10px;
  width:10px;
  border:none;  /* border-bredden läggs till utöver höjd/bredd */
  padding:0; /* Bort med padding - buggar kan visst ställa till det i vissa läsare har jag hört */
  margin:0; /* Garantera att utrymme mellan celler (i praktiken!) är noll */
/* Glöm inte storleken på typsnittet! - Även ett &amp;nbsp; tar plats och kan utvidga en liten cell! */ 
  font-size: 6px;  
}
-->
</style>
</head>
<body>
<table>
<tr>
  <td style="background-color:red">1</td>
  <td style="background-color:green">2</td>
</tr>
<tr>
  <td style="background-color:blue">3</td>
  <td style="background-color:yellow">4</td>
</tr>
</table>
</body>
</html>

Testa: http://member.webforum.nu/2241/pyttetabell.html

daniel_raMedlem sedan jan. 2002381 inlägg

16 dec. 2003 11:07#3

Det var bara ett exempel, jag vet att det är ganska smått =) däremot så var tanken inte att jag skulle skriva någonting utan endast fylla cellerna med olika färger för att skapa ett diagram.
Kan jag använda class för att få olika celler att se olika ut eller ställer det till några problem för storleken på cellerna, när vi ändå är inne på detta så kan jag ju ändå fråga en annan sak också: med css kan jag ju exempelvis fixa ramar runt tabeller med olika utseende och så men finns det någonstans någon lista på vilka egenskaper som jag kan sätta på cellerna.. kan jag exempelvis sätta olika färg på ramen på olika sidor i en cell eller göra den "prickad" på en sida och "solid" på en annan.. Tack för all hjälp!!!

bossseMedlem sedan juni 2003772 inlägg

16 dec. 2003 12:00#4

Borde väl gå att göra så här, tycker jag.
Om man vill ha tabellstorleken oberoende av upplösning så är det bara att ändra tabellvärdena till procent.

<html>
<head>
<title></title>
<style type="text/css">
<!--
body {background-color:green;}
table {width:200px; height:200px;background-color:blue;border-collapse:collapse;}
tr {height:50%;}	  <!-- tabellrad har bara höjd --> 
td {width:50%;border:1px solid black;}		  <!-- tabellkolumn har bara bredd --> 
-->
</style>

</head> 
<body >
<table>
<tr>
<td> cell 1 </td>
<td> cell 2 </td>
</tr>
<tr>
<td> cell 3 </td>
<td> cell 4 </td>
</tr>
</table>
</body>
</html>

jarvkloMedlem sedan juli 20013 378 inlägg

16 dec. 2003 15:25#5

daniel_ra skrev:

fylla cellerna med olika färger för att skapa ett diagram.

Aha - *det* går att göra - så länge du minst lägger in ett   i varje cell och ser till att värdet på font-size: alltid är mindre än din minsta "stapel" i diagramet (t.ex. 1px)

daniel_ra skrev:

Kan jag använda class för att få olika celler att se olika ut eller ställer det till några problem för storleken på cellerna

Visst kan du det. Men tänk på att t.ex. en storlek inställ i en klass "skriver över" en storlek satt på en tagg direkt - och att bredden på border (oftast) läggs till utöver width och height

daniel_ra skrev:

med css kan jag ju exempelvis fixa ramar runt tabeller med olika utseende och så men finns det någonstans någon lista på vilka egenskaper som jag kan sätta på cellerna..

Finns ett gäng olika. Tabell-avsnittet i CSS2-specen är komplett (även om den tenderar att vara tungläst) - men du hittar bra sammanställningar även på t.ex. Blooberry - finns minst ett par dussin ställen till (kommer inte på länkarna på rak arm just nu bara)

daniel_ra skrev:

kan jag exempelvis sätta olika färg på ramen på olika sidor i en cell eller göra den "prickad" på en sida och "solid" på en annan..

Jupp. Du kan jobba med border-right, border-left osv på både table och td (antingen med generella stilar, "style="-attributet i HTML, id:n eller klasser !) - men tänk på att det finns regler i CSS2 för hur de "skriver över varandra" som kan göra att allt inte syns om du lägger en cell med border-right till vänster om en med border-left när du kör med border-collapse:collapse ;)

daniel_raMedlem sedan jan. 2002381 inlägg

16 dec. 2003 16:41#6

snacka om svar på tal.. Jätte-tack för hjälpen. Skall försöka pilla lite med det och se hur det blir.. kanske återkommer =)