Jak to zrobić: tabele czy CSS? [zamknięte]

Question

Jak to zrobić: tabele czy CSS? [zamknięte]

Puzzle http://sontag.ca/TheChallenge/tiles.gif Grinch http://sontag.ca/gif/grinch.gif

Część I

Ten układ może być wykonany w prosty sposób z 2 tabelami HTML, jedna zagnieżdżona wewnątrz drugiej, lub nawet z pojedynczą tabelą.

Można to również zrobić za pomocą CSS, chociaż może to wymagać trochę więcej myślenia.

To może nie jest układ w prawdziwym świecie, ale widziałem strony, które są podobne. Potraktuj to jako zagadkę; ćwiczenie na wzmocnienie twoje umiejętności CSS.

Aby uczynić sprawę bardziej interesującą, oprawiłem pytanie w małą 2-częściową stronę internetową o nazwie wyzwanie . Zbadamy kod i pytanie: Layout z tabelami czy CSS?, ramię w ramię, cios za cios, gdy nasi dwaj przeciwnicy walczą o dominację kodu.

Część I przedstawia jak wyzwanie przyszedł. Mam nadzieję, że ci się spodoba.

Część II to decyzja . You might be zaskoczony .

Część II

Byłem zdumiony, jak szybko naprawdę dobre odpowiedzi pojawiły się zaledwie minuty po tym, jak opublikowałem. To było upokarzające doświadczenie. Nie mam ochoty konkurować z Tobą w próbach czasowych.

[1]} ale, wszystko to powiedziawszy, po dokładnym zbadaniu oferowanych rozwiązań, doszedłem do zdaj sobie sprawę, że żadne z rozwiązań CSS (w tym moje własne w tym czasie) nie działało tak dobrze, jak żadne z oferowanych rozwiązań tabelkowych. Wyzwanie polegało na tym, że CSS jest lepsze niż tabele dla dowolnego rozwiązania układu.

Więc dodałem 3 nowe zasady (pamiętaj, jedna z zasad jest taka, że zasady można zmienić). To denerwowało niektórych ludzi. Więc potem dodałem kilka kolorowych wyjaśnień, dlaczego zasady zostały zmienione. Myślę, że to ich jeszcze bardziej wkurzyło.

mieszkańcy każdej działce (postacie) muszą być czarne lub białe, w zależności od tego, który pokazuje im najlepszy w swoim ogrodzie. Również wszystkie są kursywą. Nie ma kursywy. ;-)
ogród jest relokowany, czyli mogę mieć ten ogród, w dowolnym miejscu na stronie (bez absolutnego pozycjonowania).

Tak ma wyglądać końcowe wyjście (opcjonalny kolor tła):

Alt tekst http://sontag.ca/gif/garden.gif

Przepraszam za kapryśną i ostatnią zmianę zasad. Pomyliłem się. Mieszkańcy każdej działki to rzemieślnicy, ręcznie wykonywani specjaliści. Są potomkami rodziny kursywnej, A swoje poczucie stylu zawdzięczają kursywie.

Ogród musi być relokowany, ponieważ oba rodzaje ogrodów (table i CSS) muszą współistnieć na tej samej stronie. Mogę się mylić mówiąc, że position:absolute Zasady nie wolno. Jeśli możesz je zmusić do pracy w tym kontekście, to więcej mocy dla Ciebie. Z pewnością zostaną zaakceptowane.

Poprosiłem o ogrodzenie wokół działki, ponieważ każdy rodzaj ogrodu będzie sadzony na wsi z Pomarańczowym tłem bardzo podobnym do koloru niektórych kwiatów, które uprawiamy.

Mieszkam teraz w Holandii i zbliża się sezon tulipanów. Jeśli polecisz nad Holandią w ciągu najbliższych kilku tygodni ,a jest jasny dzień (trochę Rzadki tutaj) krajobraz poniżej będzie wyglądać raczej podobnie do tego głupiego ćwiczenia.

Nie szaleję za pomarańczowym, ale lubię i podziwiam Holendrów, dlatego mamy pomarańczowe tło, hołd dla mojego kraju goszczącego. :-)

Część III

Zamieściłem odpowiedź tabeli z wyzwania poniżej wraz z tym obrazkiem

Alt text http://sontag.ca/gif/garden2.gif

Ponieważ lokatorów można łatwo dodać do działek ogrodowych bez dotykanie reguł CSS-wszystko jest automatycznie wyśrodkowane.

Czy można to zrobić z CSS? Możesz ściąć najpotężniejsze drzewo w lesie... śledzia?

Update : odpowiedź Charliego jest tutaj.

71

xhtml css layout html-table

Author: Community, 2009-03-12

Source

12 answers

Aktualizacja: Ostatnia edycja. przełączono na STRICT DTD, usunięto kursywę, aby dopasować obraz w pytaniu, i przywrócono z powrotem do pełnych nazw kolorów dla identyfikatorów, aby pokazać intencję zgodnie z komentarzem OPs na pytanie, i posortowano główną kolumnę nazw identyfikatorów w css w kolejności, w jakiej pojawiają się w html.

Zdecydowałem się również nie używać zewnętrznego div jako białego kwadratu 7 (nie miał własnego div w poprzednich edycjach ), ponieważ nie byłoby to praktyczne, gdybyś chciał użyć układ i czułem się trochę jak oszustwo (chociaż z zwięzłego/pixelowego punktu widzenia podobało mi się jego policzkowość).

Zobacz tutaj: http://jsbin.com/efidi
Edytuj tutaj: http://jsbin.com/efidi/edit
Validates as XHTML strict

<!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="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     { text-align: center; width:175px; height:175px; line-height: 35px;}
div div {         float:left; width: 35px; height: 35px;}
#orange, #maroon,
#blue  , #green  {float:right;}

#orange, #silver {background-color:silver;  width:140px;}
#navy  , #maroon {background-color:maroon; height:140px; line-height:140px;}
         #navy   {background-color:navy  ;}
#green , #red    {background-color:red   ;  width: 70px;}
#yellow, #blue   {background-color:blue  ; height: 70px; line-height: 70px;}
         #yellow {background-color:yellow;}
         #white  {background-color:white ;}
         #green  {background-color:green ;}
         #orange {background-color:orange;}
</style> 
</head> 
<body> 
  <div> 
    <div id="silver">1</div> 
    <div id="maroon">2</div> 
    <div id="navy"  >3</div> 
    <div id="red"   >4</div> 
    <div id="blue"  >5</div> 
    <div id="yellow">6</div> 
    <div id="white" >7</div>
    <div id="green" >8</div> 
    <div id="orange">9</div> 
  </div>
</body></html>

Na bok: być może dodałbym trochę więcej białych znaków, gdybym mógł, ale to jest na granicy, zanim bloki kodu tutaj włączone, więc zaczyna dostawać paski przewijania i zdecydowałem się, aby to wszystko pojawiło się na ekran.

Uwaga: pożyczyłem line-height fix od Tysona (który jako pierwszy otrzymał poprawną odpowiedź renderującą).

37

Author: Sam Hasler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:29:39

Oto trzy rozwiązania.

Znacznik:

<div id="outer">
    <div id="a1">1</div>
    <div id="a2">2</div>
    <div id="a3">3</div>
    <div id="a4">4</div>
    <div id="a5">5</div>
    <div id="a6">6</div>
    <div id="a7">7</div>
    <div id="a8">8</div>
    <div id="a9">9</div>
</div>

Podstawowy arkusz stylów (wymiary i kolor):

#outer {
    width: 20em;
    height: 20em;
}
#a1 {
    background-color: #C0C0C0;
    width: 80%;
    height: 20%;
}
#a2 {
    background-color: #800000;
    width: 20%;
    height: 80%;
}
#a3 {
    background-color: #000080;
    width: 20%;
    height: 80%;
}
#a4 {
    background-color: #FF0000;
    width: 40%;
    height: 20%;
}
#a5 {
    background-color: #0000FF;
    width: 20%;
    height: 40%;
}
#a6 {
    background-color: #FFFF00;
    width: 20%;
    height: 40%;
}
#a7 {
    background-color: #FFFFFF;
    width: 20%;
    height: 20%;
}
#a8 {
    background-color: #008000;
    width: 40%;
    height: 20%;
}
#a9 {
    background-color: #FFA500;
    height: 20%;
    width: 80%;
}

A teraz pozycjonowanie:

Używając float:

#a1 {
    float: left;
}
#a2 {
    float: right;
}
#a3 {
    float: left;
}
#a4 {
    float: left;
}
#a5 {
    float: right;
}
#a6 {
    float: left;
}
#a7 {
    float: left;
}
#a8 {
    float: right;
}
#a9 {
    float: right;
}

Używając position:

#outer {
    position: relative;
}
#outer div {
    position: absolute;
}
#a1 {
    top: 0;
    left: 0;
}
#a2 {
    top: 0;
    right: 0;
}
#a3 {
    top: 20%;
    left: 0;
}
#a4 {
    top: 20%;
    left: 20%;
}
#a5 {
    top: 20%;
    right: 20%;
}
#a6 {
    top: 40%;
    left: 20%;
}
#a7 {
    top: 40%;
    left: 40%;
}
#a8 {
    bottom: 20%;
    right: 20%;
}
#a9 {
    bottom: 0;
    right: 0;
}

Używając margin:

#a1 {
}
#a2 {
    margin: -20% -80% 0 80%;
}
#a3 {
    margin: -60% 0 0 0;
}
#a4 {
    margin: -80% -20% 0 20%;
}
#a5 {
    margin: -20% -60% 0 60%;
}
#a6 {
    margin: -20% -20% 0 20%;
}
#a7 {
    margin: -40% -40% 0 40%;
}
#a8 {
    margin: 0 -40% 0 40%;
}
#a9 {
    margin: 0 -20% 0 20%;
}

18

Author: Gumbo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-12 00:02:22

Proszę bardzo - mniej linijek niż może dostarczyć jakikolwiek niewłaściwy znacznik tabeli:

<img
    src="http://sontag.ca/TheChallenge/tiles.gif"
    alt="nine assorted coloured rectangles"
/>

:P

16

Author: Peter Boughton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-12 00:46:19

To dokładnie pasuje do twojego przykładu tabeli, włączając w to wyśrodkowany pionowo i poziomo tekst(którego nikt inny nie zrobił do tej pory).

<!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="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Boxy Boxes in a Box</title>

    <style type="text/css" media="screen">
        #container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }

        .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}

        #box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
        #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
        #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
        #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
        #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
        #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
        #box_7 {top: 70px; left: 70px; background-color: white;}
        #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
        #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
    </style>
</head>

<body>
    <div id="container">
        <div id="box_1" class="box">1</div>
        <div id="box_2" class="box">2</div>
        <div id="box_3" class="box">3</div>
        <div id="box_4" class="box">4</div>
        <div id="box_5" class="box">5</div>
        <div id="box_6" class="box">6</div>
        <div id="box_7" class="box">7</div>
        <div id="box_8" class="box">8</div>
        <div id="box_9" class="box">9</div>
    </div>
</body>
</html>

13

Author: Tyson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-11 23:35:24

Dopóki szerokość i wysokość są stałe, zawsze można użyć pozycjonowania absolutnego, aby uzyskać ten sam efekt. To powinno być wystarczająco oczywiste, żebym nie musiał tego wpisywać (tutaj jest późno i jestem leniwy :p)

4

Author: Vilx-,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-11 23:35:43

Przyjęłam nieco inne podejście niż rozwiązania "id everything", które do tej pory widziałem. Jest to mniej niż 100 znaków więcej niż rozwiązanie oparte na tabelach.

<!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="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
    position:absolute;
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px
}

.spiral { width:175px; height:175px }

.t { top:0 }
.l { left:0 }
.r { right:0 }
.b { bottom:0 }
.w { width:140px }
.h { height:140px; line-height:140px }
.c {
    top:35px;
    left:35px;
    width:105px;
    height:105px
}

.c .w { width:70px }
.c .h { height:70px; line-height: 70px }
.c .c { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
    <div class="t l w" style="background-color:silver">1</div>
    <div class="t r h" style="background-color:maroon">2</div>
    <div class="b l h" style="background-color:navy">3</div>
    <div class="c">
        <div class="t l w" style="background-color:red">4</div>
        <div class="t r h" style="background-color:blue">5</div>
        <div class="b l h" style="background-color:yellow">6</div>
        <div class="c">7</div>
        <div class="b r w" style="background-color:green">8</div>
    </div>
    <div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>

Edit: W oparciu o Twoje modyfikacje zamieszczam nieco bardziej wyraziste, ale mam nadzieję jaśniejsze rozwiązanie, które dodaje czarną obwódkę, ustawia tekst na biały i absolutnie nie pozycjonuje "ogrodu".

<!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="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
    position:absolute;
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px
}

div.spiral {
    position:relative;
    width:175px;
    height:175px;
    border: 1px solid #000
}

.top { top:0 }
.left { left:0 }
.right { right:0 }
.bottom { bottom:0 }
.wide { width:140px }
.tall { height:140px; line-height:140px }
.center {
    top:35px;
    left:35px;
    width:105px;
    height:105px
}

.center .wide { width:70px }
.center .tall { height:70px; line-height: 70px }
.center .center { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
    <div class="top left wide" style="background-color:silver">1</div>
    <div class="top right tall" style="background-color:maroon">2</div>
    <div class="bottom left tall" style="background-color:navy;color:#fff">3</div>
    <div class="center">
        <div class="top left wide" style="background-color:red">4</div>
        <div class="top right tall" style="background-color:blue">5</div>
        <div class="bottom left tall" style="background-color:yellow">6</div>
        <div class="center">7</div>
        <div class="bottom right wide" style="background-color:green">8</div>
    </div>
    <div class="bottom right wide" style="background-color:orange">9</div>
</div>
</body>
</html>

4

Author: Prestaul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-13 07:58:59

Nikt nie podał jeszcze rozwiązania tabeli, a wyzwaniem jest porównanie układów CSS do układów opartych na tabelach w kontrolowanym (i mocno stronniczym) scenariuszu.

Oto rozwiązanie układu stołu Teda i jego wyzwanie...

"dzięki mojemu rozwiązaniu opartemu na stole, bardzo łatwo jest dodać nowych mieszkańców do działek ogrodowych tylko przez bardzo proste dodatki do znaczników HTML! Wszyscy mieszkańcy są automatycznie wyśrodkowywani i rozmieszczani w przyjemnym stylu. Na przykład:"

Alt text http://sontag.ca/gif/bluefish.gif alt text http://sontag.ca/gif/garden2.gif

"o ile mi wiadomo, żadne rozwiązania oparte na CSS nie mogą pomieścić nowych mieszkańców bez gruntownej renowacji zasad CSS."

"lepiej przynieś dużo pieniędzy chłopcy, czuję się naprawdę głodny i spragniony teraz."

<!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">
<head>
<title>Terrible Ted's Table Layout</title>
<style type="text/css">

#master TD { text-align: center }
#master { 
  border: 1px solid black;
  font: italic 100%/200% 'Comic Sans MS', cursive; 
}
#silver { background-color:silver }
#maroon { background-color: maroon;  color:white }
#navy { background-color:navy;  color:white }
#red { background-color: red }
#blue { background-color:blue;  color:white }
#yellow { background-color: yellow }
#green { background-color:green;  color:white }
#orange { background-color:orange }
#white { background-color:white }

#silver, #red, #green, #orange, #white { height: 35px }
#maroon, #navy, #blue, #yellow, #white { width: 35px }

</style>
</head>
<body style="background-color:#ffb600">

<table id="master" border="0" cellpadding="0" cellspacing="0" 
  summary="layoutByTable"><tr>
    <td id="silver" colspan="2" > 1 </td> 
    <td id="maroon" rowspan="2" > 2 </td>
  </tr><tr>
  <td id="navy" rowspan="2" > 3 </td>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" 
      summary="inner"><tr>
        <td id="red" colspan="2" > 4 </td>
        <td id="blue" rowspan="2" > 5 </td>
      </tr><tr>
        <td id="yellow" rowspan="2" > 6 </td>
        <td id="white"> 7 </td>
      </tr><tr>
        <td id="green" colspan="2" > 8 </td>
      </tr>
    </table>
  </td>
</tr><tr>
 <td id="orange" colspan="2"> 9 </td>
</tr>
</table>

</body>
</html>

4

Author: Diogenes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-13 09:41:34

Roztwór z jednego stołu.

Nie przegłosuj mnie.

Wiem, że to nie jest odpowiedź na pierwotne pytanie.
Zamieściłem tę odpowiedź, ponieważ OP zażądał jej w komentarzu do pierwotnego pytania.

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-language" content="en" />
        <title>The Challenge</title>
    </head>
    <body>

        <table cellspacing="0" cellpadding="0" border="0" summary="">
            <tr>
                <td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td>
                <td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td>
                <td rowspan="5" valign="bottom"><img src="http://sontag.ca/gif/grinch.gif" width="41" height="122" alt="Dr. Suess's Grinch"/></td>
            </tr><tr>
                <td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td>
                <td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td>
                <td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td>
            </tr><tr>
                <td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td>
                <td width="35" height="35" align="center"><i>7</i></td>
            </tr><tr>
                <td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td>
            </tr><tr>
                <td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td>
            </tr>
        </table>

    </body>
</html>

Jest poprawny XHTML 1.0 Transitional i włączyłem postać Dr. Suessa:)

Poprzez usunięcie Dr. Suess character, <?xml deklaracji, meta-tags i summary atrybutu możesz go przyciąć do 929 znaków i nadal być poprawnym XHTML 1.0 Przejściowe.

Edit

Zgodnie z życzeniem, XHTML 1.0 Strict

<!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="en" lang="en">
    <head>
        <title>The Challenge</title>
        <style type="text/css">
            BODY {background: orange}
            #garden {border: 1px solid black; color: black}
            #garden TD {
                font: italic 100% 'Comic Sans MS', cursive;
                height: 35px;
                padding: 0;
                text-align: center;
                width: 35px
            }
            #c1 {background: silver}
            #c2 {background: maroon; color: white}
            #c3 {background: navy;   color: white}
            #c4 {background: red}
            #c5 {background: blue;   color: white}
            #c6 {background: yellow}
            #c7 {background: white}
            #c8 {background: green;  color: white}
            #c9 {background: orange}
        </style>
    </head>
    <body>

        <table id="garden" cellspacing="0">
            <tr>
                <td id="c1" colspan="4">1</td>
                <td id="c2" rowspan="4">2</td>
            </tr><tr>
                <td id="c3" rowspan="4">3</td>
                <td id="c4" colspan="2">4</td>
                <td id="c5" rowspan="2">5</td>
            </tr><tr>
                <td id="c6" rowspan="2">6</td>
                <td id="c7">7</td>
            </tr><tr>
                <td id="c8" colspan="2">8</td>
            </tr><tr>
                <td id="c9" colspan="4">9</td>
            </tr>
        </table>

    </body>
</html>

970 nie-białych znaków, pomarańczowe tło, Dr Suess ' s Grinch usunięty.

4

Author: Jacco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-15 09:15:53

Zwięzłość znaczników....

<!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="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
    .garden {
        position: relative;
        width: 175px;
        height: 175px;
        font-family: 'Comic Sans MS', cursive;
        border: 1px solid;
        color: #000;
        }
    .garden div {
        position: absolute;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        }
    .garden div:first-child {
        width: 140px;
        background: silver;
        }
    .garden div:first-child + div {
        right: 0;
        height: 140px;
        line-height: 140px;
        color: #fff;
        background: maroon;
        }
    .garden div:first-child + div + div {
        top: 35px;
        height: 140px;
        line-height: 140px;
        color: #fff;
        background: navy;
        }
    .garden div:first-child + div + div + div {
        top: 35px;
        left: 35px;
        width: 70px;
        background: red;
        }
    .garden div:first-child + div + div + div + div {
        top: 35px;
        right: 35px;
        height: 70px;
        line-height: 70px;
        background: blue;
        }
    .garden div:first-child + div + div + div + div + div {
        top: 70px;
        left: 35px;
        height: 70px;
        line-height: 70px;
        background: yellow;
        }
    .garden div:first-child + div + div + div + div + div + div {
        top: 70px;
        left: 70px;
        background: white;
        }
    .garden div:first-child + div + div + div + div + div + div + div {
        top: 105px;
        left: 70px;
        width: 70px;
        background: green;
        }
    .garden div:first-child + div + div + div + div + div + div + div + div{
        bottom: 0;
        right: 0;
        width: 140px;
        background: orange;
        }

    </style> 
</head> 
<body> 
<div class="garden"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div> 
<div>7</div>
<div>8</div> 
<div>9</div> 
</div>
</body>
</html>

Link

2

Author: Andy Ford,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-13 00:55:58

Chyba udowodniliśmy, że można to zrobić w więcej niż jeden sposób. Znacznik table i CSS są realnymi opcjami.

Zamiast dodawać inny sposób na ukończenie wyzwania, chciałbym tylko powiedzieć, że czy jest to łatwiejsze, czy trudniejsze, prostsze lub bardziej złożone: tabele w HTML powinny być używane do wyświetlania danych tabelarycznych.

tabele są Wykonane dla danych tabelarycznych.
CSS jest stworzony do stylizacji / prezentacji.

1

Author: Travis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-28 19:15:40

Oto przykład, który nie używa pozycjonowania bezwzględnego, nie używa komórki tabeli i jest ważny w IE6-8, FF, itd.

<!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="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Terrible Ted's Table Layout</title>
<style type="text/css">
#box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;}

div {float:left}

#c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px}
#c2, #c3{height:140px;line-height:140px}
#c5, #c6{height:70px; line-height:70px}

#c1, #c9{width:140px}
#c2, #c3, #c5, #c6, #c7{width:35px}
#c4, #c8{width:70px}

#c6, #c7 {margin-top:-35px}

#c1{background-color:silver}
#c2{background-color:maroon; float:right}
#c3{background-color:navy}
#c4{background-color:red}
#c5{background-color:blue}
#c6{background-color:yellow}
#c7{background-color:white}
#c8{background-color:green}
#c9{background-color:orange}

</style>
</head>
<body>
<div id="box">
<div id="c1">1</div>
<div id="c2">2</div>
<div id="c3">3</div>
<div id="c4">4</div>
<div id="c5">5</div>
<div id="c6">6</div>
<div id="c7">7</div>
<div id="c8">8</div>
<div id="c9">9</div>
</div>
</body>
</html>

0

Author: pinxi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-14 07:22:23

score 1 · Accepted Answer

Alt text http://sontag.ca/gif/catInHat.gif po raz pierwszy zrobiłem to ćwiczenie nieco ponad 2 lata temu, kiedy po raz pierwszy uczyłem się HTML i CSS. Moje pierwsze rozwiązanie było podobne do tego, które widzisz tutaj, z wyjątkiem bez anonimowego kontenera DIVs. Potem wpadłem na pomysł na stronę internetową, która zrobiła obok siebie porównanie CSS do tabeli, aby udowodnić, że CSS był lepszy. Więc pracowałem nad stroną wyzwania, opublikowałem ją, a potem zamieściłem to pytanie.

Sam Hasler posted an odpowiedź w ciągu kilku minut, wydaje się, że było naprawdę blisko. Widzę, że jest na dobrej drodze do lepszego rozwiązania niż to, co miałem. Wszystkie jego div były w porządku, a moje Nie. Jacco opublikował komentarz z pytaniem, Dlaczego użyłem dwóch zagnieżdżonych tabel, gdy jedna by to zrobiła. Oczywiście też miał rację.

Więc miałem dwa Homer Simpson "Doh!" momenty od razu. Czytam inne pytania i odpowiedzi na tabele vs. CSS. Ktoś wspomniał, że stoły wyśrodkowane pionowo. Moja odpowiedź zrobiła nie wyśrodkować pionowo albo, ale myślałem, że to możliwe. W końcu chodzi o to, by robić wszystko, co może zrobić stół i lepiej. Już teraz, wyglądając jak głupiec, zamalowałem się w kącie, więc musiałem znaleźć odpowiedź.

W końcu (wstydzę się powiedzieć, jak długo to trwało) wymyśliłem rozwiązanie poniżej. Byłem wtedy w stanie spełnić moją oryginalną koncepcję strony porównawczej side-by-side.

Oto wyjaśnienie, jak to wszystko działa i dlaczego powinieneś użyć CSS

Odpowiedź Charliego...

<!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">
<head>
<title>Charlie's CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

#outer { 
  width:175px; height:175px; 
  text-align:center; 
  font: italic 100%/200% 'Comic Sans MS', cursive;  
  border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV 
{ display: table-cell;  vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }

#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width:  35px }
#c2>DIV, #c3>DIV { height: 140px } 
#c1>DIV, #c9>DIV { width:  140px } 
#c5>DIV, #c6>DIV { height:  70px } 
#c4>DIV, #c8>DIV { width:   70px } 
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }

#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }

/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% } 
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }

</style>
</head>
<body>

<div id="outer">
  <div id="c1"><div> 1 </div></div>
  <div id="c3"><div>3<br/>3<br/>3</div></div>
  <div id="inner">
    <div id="c4"><div> 4 </div></div>
    <div id="c5"><div> 5<br/>5 </div></div>
    <div id="c6"><div> 6 </div></div>
    <div id="c7"><div> 7 </div></div>
    <div id="c8"><div> 8 </div></div>
  </div>
  <div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
  <div id="c9"><div> 9 9 9</div></div>
</div>

</body>
</html>