Tabell med DIV-taggar i stället?

Conny Westh · 2011-05-05, 12:16

Har testat en del idéer men inte fått 100% kläm på hur jag ska åstadkomma en tabell med raka kolumner men där kolumnbredden anpassas (för alla rader) till den rad med det bredaste innehållet i just den kolumnen.

Utseendet ska vara som en vanlig <table> i html men var abyggt med <div>-taggar.

Mitt arbete hittils:

CSS-filen (test_tabell.css):

Kod:

div.table
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_header
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_body
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_column
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
}


div.table_row
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_cell
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
}

div.table_footer
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;

}

div.table_footer_column
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
}

HTML-filen (test_tabell.html):

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <link rel="stylesheet" type="text/css" href="test_tabell.css" media="all"/>
    <title>Test</title>
</head>
<body>

<h1>Testsida för tabell med DIV-taggar</h1>
<p>Nedan är ett test på hur man skapar en tabell med hjälp av DIV-taggar. Just nu så är inte kolumnerna inte särskilt snyggt uppställda, men test pågår.</p>


<div class="table">Tabell För kunder
    <div class="table_header">
        <div class="table_column">
            Kundnuummer
        </div>
        <div class="table_column">
            Förnamn
        </div>
        <div class="table_column">
            Efternamn
        </div>
    </div>
    <div class="table_body">
        <div class="table_row">
            <div class="table_cell">
                1
            </div>
            <div class="table_cell">
                Kalle
            </div>
            <div class="table_cell">
                Svensson
            </div>
        </div>
    </div>


        <div class="table_row">
            <div class="table_cell">
                2
            </div>
            <div class="table_cell">
                Olle
            </div>
            <div class="table_cell">
                Gustavsson
            </div>
        </div>


        <div class="table_row">
            <div class="table_cell">
                3
            </div>
            <div class="table_cell">
                David
            </div>
            <div class="table_cell">
                Holgersson
            </div>
        </div>


    <div class="table_footer">
        <div class="table_footer_column">
            Fot 1
        </div>
        <div class="table_footer_column">
            Fot 2
        </div>
        <div class="table_footer_column">
            Fot 3
        </div>
    </div>
</div>



</body>
</html>

tartareandesire · 2011-05-05, 12:26

Om det är en tabell så bör man använda table

Conny Westh · 2011-05-05, 12:40

Jag brukar använda <table> men det finns en viss negativ biass mot tabeller så det är ett önskemål att lösa problemet med <div>-taggar, då det inte är frågan om tabellbaserat data utan som formatering av webbsida.

akelagercrantz · 2011-05-05, 12:44

Kika på display: table;

Fungerar i de flesta moderna webbläsare förutom IE7 (nu när tom microsoft tar krafttag mot IE6 kanske det är dags att fasa ut IE7 också?)

http://www.quirksmode.org/css/display.html#table

Ara · 2011-05-05, 12:45

Citat:

Ursprungligen postat av ConnyWesth

Jag brukar använda <table> men det finns en viss negativ biass mot tabeller så det är ett önskemål att lösa problemet med <div>-taggar, då det inte är frågan om tabellbaserat data utan som formatering av webbsida.

Tabeller ska användas till tabeller men inte som design. Ska du ha en tabell ska du också använda <table>

Conny Westh · 2011-05-05, 13:18

Tackar akelagerkrantz, det löste mitt problem perfekt.

Anders Larsson · 2011-05-05, 14:32

Citat:

Ursprungligen postat av Ara

Tabeller ska användas till tabeller men inte som design. Ska du ha en tabell ska du också använda <table>

+1. Visst är det så!

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Tabell med DIV-taggar i stället?