Programowanie w .NET: DIV vs Table czyli o layoucie strony

wtorek, 3 sierpnia 2010

DIV vs Table czyli o layoucie strony

Tworząc nową stronę www w pierwszej kolejności należy zastanowić się nad layoutem, czyli wizualnym ułożeniem głównych części na stronie. Części te to np. nagłówek, menu, podmenu, zawartość strony, stopka itp. Można tutaj wyróżnić więcej lub mniej bloków budujących wygląd strony.

Aby ułatwić sobie sprawę kodowania możemy wykorzystać dwa mechanizmy ułatwiające ułożenie elementów na stronie: tabelki oraz divy. Jeden jak i drugi mechanizm ma swoje zalety i wady. Divy zyskują w ostatnim czasie na przewadze, główne ze względu na możliwość zarządzania nimi z stylów css. Tabelki są łatwiejsze w implementacji, jednak nie zapewniają takiej elastyczności jak divy.

Zobaczmy na przykładowy layout prostej strony:

Mamy tutaj kilka podstawowych elementów. Zobaczymy w jaki sposób osiągnąć taki rezultat za pomocą tabelek jak i divów.

Najpierw tabelki:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Moja strona www</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
            float: left;
        }
        .style2
        {
            width: 159px;
        }
    </style>
</head>
<body>
<table>


</table>
    <form id="form1" runat="server">


    <table align="center" class="style1">
        <tr>
            <td colspan="2">
                Nagłówek</td>
        </tr>
        <tr>
            <td class="style2">
                Menu</td>
            <td>
                Zawartość strony</td>
        </tr>
        <tr>
            <td colspan="2">
                Stopka</td>
        </tr>
    </table>


    </form>
</body>
</html>

A teraz ten sam wygląd tylko za pomocą divów:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Moja strona www</title>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="header">
            Nagłówek
        </div>
 
        <div class="leftMenu">
            Lewe menu
        </div>
 
        <div class="pageContent">
            Zawartość strony
        </div>
 
        <div class="fotter">
            Stopka
        </div>
    </div>
    </form>
</body>
</html>

i plik styli:

div.top
{
    width: 100%;
    height: 100px;
    border-color: Red;
    border-style: solid;
}
 
div.leftMenu
{
    border-color: Red;
    border-style: solid;
    width: 150px;
    height: auto;
    display: inline;
    min-height: 400;
    float: left;
}
 
div.pageContent
{
    border-color: Green;
    border-style: solid;
    float: left;
    display: inline;
    width: 500px;
}
 
div.fotter
{
    border-color: Yellow;
    border-style: solid;
    width: 100%;
    height: 30px;
    clear: both;
}

Jak podkreślałem wcześniej, w tym momencie divy używane są częściej niż tabelki. W standardzie HTML 5 dojdą nowe kontenery, więc i divy pewnie stracą na swojej popularności.