4 svar · 389 visningar · startad av nummersju
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 :P 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! :)
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! :p
<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? :)
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.
<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>