Skapa en tabell med css...

4 svar · 394 visningar · startad av nummersju 18 okt. 2005

nummersjuMedlem sedan aug. 2005198 inlägg

Trådstart18 okt. 2005 20:25#1

Hej hej!
Min pappa, webbdesignlärare, kom in och frågade mig hur man gör en sådan här tabell i css.

Eftersom jag förespråkar CSS och Xthml tänkte han att jag borde ha svar på detta, något som jag inte hade Så jag undrar er hur man på lättast sätt gör en sådan "tabell" i css-divvar eller vad som nu är enklast.

Tack för svar!

MeleaMedlem sedan juli 20033 147 inlägg

18 okt. 2005 20:27#2

Alltså, om en tabell gynnar ändåmålet ska det självklart användas en tabell. Inte en massa klåttrig CSS-kod.

/r well, nu blev det inget svar på din fråga. hmpf!

zcorpanMedlem sedan dec. 20042 245 inlägg

18 okt. 2005 21:12#3

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Tabell med CSS</title>
  <style type="text/css">
   body { display:table; border-collapse:collapse; width:10em; height:10em; margin:1em; }
   div { display:table-row; }
   span { display:table-cell; border:thin solid; }
   span + span { width:65%; }
  </style>
 </head>
 <body>
  <div><span/><span/></div>
  <div><span/><span/></div>
 </body>
</html>

Nåt sånt?

JonasyMedlem sedan okt. 20056 inlägg

19 okt. 2005 07:01#4

Precis som Melea säger skall du använda <table> för tabulär data. Att använda en lösning som zcorpan visar är helt semantiskt förkastligt. Så du svarade ju på hans fråga, Melea.

Ett bra tips är att använda <thead> och <tbody> för att definera vad som är datat och vad som är rubriker i tabellen, detta hjälper skärmuppläsare + att det blir enklare att skriva CSS:en.

bossseMedlem sedan juni 2003771 inlägg

19 okt. 2005 07:53#5

<html>
<head>
<style type="text/css">
table 
{width:200px; 
height:300px;
border:1px solid black; 
border-collapse:collapse; 
}
td 
{border:1px solid black; 
border-collapse:collapse;}
.kolumn 
{width:35%; 
height:50%}
</style>
 </head>
<body>
  <table>
<tr>
<td class=kolumn>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td class=kolumn>cell 3</td>
<td>cell 4</td>
</tr>
</table>
 </body>
</html>