Как бы ВЫ это сделали: таблицы или CSS?

Головоломка Grinch
(источник: sontag.ca)

Часть I

Этот макет может быть выполнен довольно просто с двумя таблицами HTML, одна вложена внутри другой, или даже с одной таблицей.

Это также можно сделать с помощью CSS, хотя для этого потребуется немного подумать.

Возможно, это не реальный макет, но я видел похожие страницы. Считайте это загадкой; упражнение для улучшения ваших навыков CSS.

Чтобы сделать вещи немного интереснее, я сформулировал вопрос на небольшой веб-странице из двух частей под названием Задача. Мы рассмотрим код и вопрос: Макет с таблицами или CSS? бок о бок, шаг за шагом, пока наши два оппонента борются за превосходство кода.

В части I рассказывается, как Задача. Надеюсь вам нравится.

Часть II - это Решение. Вы можете быть удивлены.

Часть II

Я был поражен тем, как быстро появились действительно хорошие ответы всего через минуты после публикации. Это был унизительный опыт. У меня нет желания соревноваться с вами в гонках на время.

НО, все, что было сказано, после внимательного изучения предлагаемых решений я пришел к выводу, что ни одно из решений CSS (включая мое собственное в то время) не работает так же хорошо, как любое из предлагаемых решений для таблиц. Задача заключалась в том, чтобы CSS лучше, чем таблицы, для любого компоновочного решения.

Итак, я добавил 3 новых правила (помните, одно из правил состоит в том, что правила можно изменять). Некоторых это раздражало. Затем я добавил несколько ярких объяснений того, почему были изменены правила. Думаю, их это раздражало еще больше.

  1. Наш сад должен быть обнесен забором; что-то, чтобы отделить его от того мрачного окружения, в котором он может оказаться; и не слишком дорого, но легко содержать в чистоте. Итак, я хочу, чтобы вокруг сада была черная рамка в 1 пиксель.
  2. Жители каждого садового участка (персонажи) должны быть либо черными, либо белыми, в зависимости от того, что лучше всего показывает им в их саду. Также все они скорописного происхождения. Курсивом они не выделены. ;-)
  3. Сад можно перемещать, то есть я могу разместить этот сад в любом месте страницы (без абсолютного позиционирования).

Вот как должен выглядеть окончательный результат (цвет фона необязателен):

alt text
(источник: sontag.ca )

Приношу свои извинения за капризное изменение правил в последнюю минуту. Я ошибся. Обитатели каждого садового участка - ремесленники, мастера своего дела. Они являются потомками курсива и обязаны своим чувством стиля курсивом.

Сад должен быть перемещаемым, потому что оба вида садов (стол и CSS) должны сосуществовать на одной странице. Я могу ошибаться, говоря, что position:absolute правила не разрешены. Если вы сможете заставить их работать в этом контексте, тогда у вас будет больше возможностей. Они обязательно будут приняты.

Я попросил поставить забор вокруг участка, потому что каждый тип сада будет посажен в сельской местности с оранжевым фоном, очень похожим на цвет некоторых цветов, которые мы выращиваем.

Сейчас я живу в Голландии, и сезон тюльпанов быстро приближается. Если вы будете летать над Голландией в следующие несколько недель, и это будет ясный день (что здесь редкость), то пейзаж ниже будет похож на это глупое упражнение.

Я не без ума от апельсина, но я люблю и восхищаюсь голландцами, поэтому у нас оранжевый фон, дань уважения моей принимающей стране. :-)

Часть III.

Я опубликовал табличный ответ Теда из Вызов ниже вместе с этим изображением

alt text
(источник: sontag.ca )

поскольку жильцов можно легко добавить на садовые участки, не затрагивая правила CSS - все автоматически центрируется.

Можете ли вы сделать это с помощью CSS? Можете ли вы срубить самое сильное дерево в лесу ... селедкой?

Обновление: ответ Чарли здесь.


layout css html-table xhtml
person Diogenes    schedule 11.03.2009    source источник
comment
Я не понимаю, зачем вам для этого нужно вложить две таблицы, это можно сделать в одной.   -  person Jacco    schedule 12.03.2009
comment
Все ли высота и ширина фиксированы?   -  person alex    schedule 12.03.2009
comment
Правильно ли я считаю, что цель состоит в том, чтобы создать максимально сжатую разметку?   -  person Sam Hasler    schedule 12.03.2009
comment
Обязательно ли включать персонажа доктора Зюсса?   -  person Andrew Shepherd    schedule 12.03.2009
comment
В примере на странице задания шрифт выделен курсивом, а на изображении выше - нет, что правильно?   -  person Sam Hasler    schedule 12.03.2009
comment
Жакко - Не нужны 2 стола? Хотя я не из Миссури, я все же могу сказать, покажи мне!   -  person Diogenes    schedule 12.03.2009
comment
Алекс - Да, высота и ширина фиксированы - пока!   -  person Diogenes    schedule 12.03.2009
comment
Сэм: Одна из целей - краткость, другая - выражение намерений. Ergo # w, # o, # n кратко, но загадочно. OTOH, #white, #orange, #navy получает больше очков за выражение намерений, чем проигрывает из-за недостаточной краткости ;-)   -  person Diogenes    schedule 12.03.2009
comment
Эндрю - Нет, персонаж доктора Зюсса не является обязательным, но он всегда хорош для очков стиля!   -  person Diogenes    schedule 12.03.2009
comment
Сэм - Нет, шрифт не курсив, это рукопись на салфетке. Но ты прав. Итак, я придумываю новое правило.   -  person Diogenes    schedule 12.03.2009
comment
Что ты задумал? Зачем нужны эти модификации под ник-нак?   -  person Gumbo    schedule 13.03.2009
comment
Nick-nack paddy-whack, брось собаке кость, этот старик не пойдет домой   -  person Diogenes    schedule 13.03.2009
comment
Вау ... Задайте вопрос, получите несколько отличных решений, измените вопрос, получите больше отзывов, измените его снова, получите больше отзывов, затем опубликуйте свое собственное решение и примите его. Вы просто пытаетесь увеличить посещаемость своего сайта?   -  person Prestaul    schedule 15.03.2009
comment
Ах, пожалуйста, Престол - ты жестко со мной говоришь. Это был эксперимент по проведению параллельного сравнения CSS и таблиц, в котором CSS должен был делать все, что делал макет таблицы. На самом деле, я не придумал своего ответа, пока не опубликовал вопрос.   -  person Diogenes    schedule 15.03.2009
comment
Изменения правил должны были быть включены в первый пост, но я сам был в неизведанных водах. Я узнал кое-что здесь, как и другие. В этом вся суть SO.   -  person Diogenes    schedule 15.03.2009
comment
это было бы слишком просто, если бы это был XAML;)   -  person 0xFF    schedule 18.09.2009

Ответы (12)


arrow_upward
37
arrow_downward

Обновление: Окончательное редактирование. Переключен на STRICT DTD, удален курсив, чтобы он соответствовал изображению в вопросе, и вернулся к полным цветным именам для идентификаторов, чтобы показать намерение в соответствии с комментарием OP по вопросу и отсортировал основной столбец имен идентификаторов в CSS в том порядке, в котором они появляются в HTML.

Я также решил не использовать повторно внешний div в качестве белого квадрата 7 (у него не было собственного div в предыдущих правках ), поскольку это было бы непрактично, если бы вы хотели использовать макет, и чувствовал себя немного похожим на обман (хотя с точки зрения краткости / идеальности пикселей мне понравилась его дерзость).

См. Здесь: http://jsbin.com/efidi
Отредактируйте здесь: http://jsbin.com/efidi/edit
Проверяется как строгий XHTML

<!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>

В сторону: я бы, возможно, добавил немного больше пробелов, если бы мог, но это предел, прежде чем блоки кода здесь, на SO, начнут получать полосы прокрутки, и я решил, чтобы все это отображалось на экране.

Примечание. Я позаимствовал исправление line-height у Тайсона ( кто первым получил правильно ответ).

person Sam Hasler    schedule 11.03.2009
comment
Это решение работает в IE 5.5, IE7 и Firefox 3. Ему просто нужны числа, и оно идеально. - person attack; 12.03.2009
comment
@attack, Спасибо, что указали на это, теперь исправлено. - person Sam Hasler; 12.03.2009
comment
Уменьшил мой ответ, и, по моим подсчетам, он на 180 символов меньше, чем табличное решение: от 1042 (таблица) до 858 (мой) символов, не считая тегов body / head / style. - person Sam Hasler; 12.03.2009
comment
Вы забыли правильный шрифт «Comic Sans MS» и синий цвет текста, если действительно хотите идеальное решение для пикселей. ;) - person Gumbo; 12.03.2009
comment
Он НЕ отображается правильно в IE6.SP1 на Win2k. (но что делает?) - person Jacco; 12.03.2009
comment
На изображении выше текст черный и не курсив, поэтому я решил проигнорировать шрифт сейчас. - person Sam Hasler; 12.03.2009
comment
Сэм, в правилах указано xhtml STRICT, а не Transitional ... Вы собираетесь сэкономить еще 12 символов! - person Prestaul; 12.03.2009
comment
@Prestaul: спасибо, что указали на это. Совершенно не заметил этого. - person Sam Hasler; 13.03.2009
comment
Я попробовал это, но самодовольного марсианина рядом не оказалось! :п - person Chetan S; 13.03.2009
comment
Взрыв, изменение правил, похоже, это не будет моим последним редактированием. - person Sam Hasler; 13.03.2009
comment
вот версия, которая подчиняется всем новым правилам jsbin.com/oqade/edit, но я не был способен ответить на вызов Теда. Единственный способ иметь дополнительные символы - вручную установить высоту содержимого в css: jsbin.com/ohoci/ edit, но я не думаю, что это приемлемое решение. - person Sam Hasler; 13.03.2009
comment
Привет, Сэм, тебе отдельное спасибо. LOL -Я получил только один голос за ответ Чарли, и у меня нет возможности доказать это, но я подозреваю, что это могли быть вы ;-) - person Diogenes; 25.03.2009
comment
Он не проверяет ... вам не хватает атрибута type двух элементов <script>. - person nyuszika7h; 02.03.2011
comment
@ Nyuszika7H, эти скрипты были добавлены jsbin. Когда я опубликовал свой ответ, их там не было. - person Sam Hasler; 02.03.2011

arrow_upward
18
arrow_downward

Вот три решения.

Разметка:

<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>

Базовая таблица стилей (размеры и цвет):

#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%;
}

А теперь позиционирование:

  • Использование 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;
}

  • Использование 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;
}

  • Использование 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%;
}
person Gumbo    schedule 11.03.2009
comment
текст не центрирован по вертикали и горизонтали. (и это не курсив, хотя это небольшая придирка.) - person Sam Hasler; 12.03.2009
comment
Технически это также неправильный размер (на странице задачи, на которую есть ссылка в вопросе, указано, что в центре есть квадрат размером 35 пикселей). - person Sam Hasler; 12.03.2009
comment
Что ж, я думаю, что это вопрос макета, а не вопрос по пикселям. - person Gumbo; 12.03.2009
comment
Это как макет пиксель. Я хочу ВСЕ. - person Diogenes; 12.03.2009
comment
Тогда просто замените 20em на 175 пикселей. Остальное остается прежним. - person Gumbo; 12.03.2009

arrow_upward
17
arrow_downward

Вот и все - меньше строк, чем может дать любое неправильное использование тегов таблиц:

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

:P

person Peter Boughton    schedule 12.03.2009
comment
Вы даже можете уместить его всего в одну линию! - person Gumbo; 12.03.2009
comment
Если нужно, да, но это более читабельно. :) - person Peter Boughton; 12.03.2009
comment
Нет, я специально избегал этого, чтобы подчеркнуть. - person Peter Boughton; 13.03.2009
comment
это правильное решение от разработчика! :) - person boj; 28.04.2009
comment
@PeterBoughton: Он сказал использовать CSS. Вы забыли кодировать изображение в background: ... data-uri, тогда у вас будет подходящее решение :-). - person Eamon Nerbonne; 05.11.2013

arrow_upward
13
arrow_downward

Это точно соответствует вашему примеру таблицы, включая вертикально и горизонтально центрированный текст (чего до сих пор не делал никто).

<!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>
person Tyson    schedule 11.03.2009
comment
Молодец, вы пришли первым. Я позаимствовал некоторые идеи для своего собственного ответа. Я постарался сделать свое как можно более кратким. - person Sam Hasler; 12.03.2009
comment
(В случае, если вы перешли и не заметили обновления вопроса), собираетесь ли вы обновиться, чтобы следовать новым правилам? - person Sam Hasler; 13.03.2009
comment
Эх, не совсем так. Я решил, как было заявлено изначально. Я не собираюсь тратить 10 часов на соблюдение случайных новых правил каждые несколько часов. :) Ваше решение в любом случае лучше. - person Tyson; 14.03.2009
comment
Извините за новые правила, но они действительно не случайны. Я хотел бы разместить решение таблицы и решение css бок о бок на одной веб-странице. Я пробовал ваш код, выглядит отлично, но позиция: absolute вызывает у меня проблемы. Если я что-то пропустил, дайте мне знать. - person Diogenes; 14.03.2009

arrow_upward
4
arrow_downward

Пока ширина и высота постоянны, всегда можно использовать абсолютное позиционирование, чтобы получить тот же эффект. Это должно быть достаточно очевидно, чтобы мне не приходилось его печатать (здесь уже поздно, а мне лень: P)

person Vilx-    schedule 11.03.2009

arrow_upward
4
arrow_downward

Я использовал несколько иной подход, чем решения "id everything", которые я видел до сих пор. Это меньше, чем на 100 символов, чем решение на основе таблиц.

<!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>

Изменить: на основе ваших изменений я публикую немного более подробное, но, надеюсь, более ясное решение, которое добавляет черную рамку, устанавливает белый цвет для некоторого текста и не позиционирует «сад» абсолютно.

<!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>
person Prestaul    schedule 12.03.2009
comment
Уменьшил мой собственный ответ, и, по моим подсчетам, он на 180 символов меньше, чем табличное решение: от 1042 (таблица) до 858 (мой) символов, не считая тегов body / head / style. - person Sam Hasler; 12.03.2009
comment
Плавающее решение очень изящное и компактное, приятная работа Сэма. Я хотел чего-то большего в духе css. Это решение можно использовать для размещения нескольких плиток на одной странице без дублирования CSS, и я надеюсь, что его можно будет прочитать и легко понять. - person Prestaul; 12.03.2009
comment
Мне нравится ваша ссылка на JSBin, поэтому я выложил версию своего кода с двумя плитками, если кто-то захочет поиграть с ней: jsbin.com/avive - person Prestaul; 12.03.2009
comment
Это тоже интересный подход, хотя мне трудно следовать ему. Можете ли вы изменить имена классов на такие, которые лучше выражают намерения? Никаких штрафов за несколько лишних символов, но большие баллы, если имена классов выражают намерение и помогают в понимании. - person Diogenes; 12.03.2009
comment
Хорошо ... Я обновился с новой версией, которая имеет более четкие имена классов и выполняет другие ваши новые запросы. Новая версия здесь: jsbin.com/uzaba - person Prestaul; 13.03.2009
comment
Вам также нужны 3, 5 и 8 белого цвета. Я не испытываю никакого удовольствия от появления нескольких символов в соответствии с макетом таблицы Теда. Мне интересно, есть ли другой способ вертикального центрирования текста, кроме использования line-height. - person Sam Hasler; 13.03.2009
comment
Есть способы заставить ячейки выровняться по вертикали и при этом не зависеть от содержимого, но это непростая задача в css, если вы не используете display: cell-table и vertical-align. (Это обман?) К сожалению, таблица ячеек не поддерживается в IE, если только элемент не является TD или TH ... - person Prestaul; 13.03.2009
comment
Думаю, я закончил гоняться за прихотями Диогена. Изменить цвет текста на других графиках должно быть несложной задачей. Я разместил это после того, как он сказал, что персонажи должны быть либо черными, либо белыми, в зависимости от того, что лучше всего показывает им в их саду ... Довольно субъективно. Я предпочел только один белый. - person Prestaul; 13.03.2009

arrow_upward
4
arrow_downward

Решение на одном столе.

Не голосуйте против меня.

Я знаю, что это не ответ на исходный вопрос.
Я опубликовал этот ответ, потому что OP запросил его в комментарии к исходному вопросу.

<?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>

Это действительный переходный XHTML 1.0, и я включил персонажа доктора Зюсса :)

Удалив Dr. Suess character, объявление <?xml, атрибут meta-tags и summary, вы можете сократить его до 929 символов и по-прежнему оставаться действительным XHTML 1.0 Transitional.

Изменить

По запросу, 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 непробельных символов, оранжевый фон, Гринч доктора Зюсса удален.

person Jacco    schedule 13.03.2009
comment
Атрибуты высоты, ширины и выравнивания недопустимы в XHTML. Вам необходимо указать их как отдельные правила CSS. Это будет хорошее упражнение. Подсказки по этому поводу см. В ответе Ted Table. - person Diogenes; 13.03.2009
comment
Мне любопытно, до чего может сократиться решение с одной таблицей, если оно будет выполнено в строгом соответствии с XHTML. - person Diogenes; 13.03.2009
comment
Атрибуты ширины и высоты действительны в переходном режиме. Этот не предназначен для решения вашей задачи, а скорее представляет собой пример одной таблицы. Вот почему я не использовал any css. Остальные могут превратить его в строгий :) - person Jacco; 13.03.2009
comment
@Jacco - привет, твоя новая версия очень хорошо прибралась! Так что уступаю вам по столовому решению - ваше лучше. Но мне почему-то кажется, что ни одно из наших настольных решений здесь не получит голосов ;-) - person Diogenes; 14.03.2009
comment
«Правильное» решение полностью зависит от характера отображаемых данных, табличные они или нет. (если это только визуально, решения Питера Боутона трудно превзойти) - person Jacco; 14.03.2009

arrow_upward
4
arrow_downward

Здесь еще никто не предложил табличное решение, и задача заключается в сравнении макетов CSS с макетами на основе таблиц в контролируемом (и сильно предвзятом) сценарии.

Итак, вот решение Ted Table Layout и его задача ...

«С моим решением на основе таблиц очень легко добавлять новых жителей на садовые участки, просто добавляя только HTML-разметку! Все жители автоматически центрируются и размещаются в удобном стиле. Например:«

alt text
(источник: sontag.ca)
alt text
(источник: sontag.ca)

«Насколько я могу судить, никакие решения на основе CSS здесь не могут вместить новых жителей без значительного обновления правил CSS».

«Лучше принесите побольше денег, мальчики, я сейчас очень голоден и хочу пить».

<!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>
person Diogenes    schedule 13.03.2009
comment
вы используете ‹br› s, чтобы символы 2, 3 и 5 отображались в отдельных строках? когда я просто добавляю их с пробелом в ваш html, они появляются в одной строке. См. jsbin.com/acoge. - person Sam Hasler; 13.03.2009
comment
Ага, это можно назвать простой разметкой, не так ли? - person Diogenes; 13.03.2009

arrow_upward
2
arrow_downward

Краткость разметки ....

<!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>

ссылка

person Andy Ford    schedule 13.03.2009
comment
Интересный подход, но в IE6 это не сработает ... - person Prestaul; 13.03.2009
comment
Да, просто хотел немного оживить - person Andy Ford; 13.03.2009
comment
Вы можете еще больше сократить разметку, используя content: ''; Правило CSS тоже. - person Tyson; 14.03.2009
comment
@Tyson - технически верно, но представление принадлежит CSS, а содержимое - HTML. @Presthaul - используя метафору "сад" ... Я бы все равно не хотел сажать свой сад в такой плохой почве - person Andy Ford; 29.04.2009

arrow_upward
1
arrow_downward

Думаю, мы доказали, что есть несколько способов сделать это. Тег table и CSS - оба варианта.

Вместо того, чтобы добавлять другой способ решения этой задачи, я просто хотел бы сказать, что проще или сложнее, проще или сложнее: таблицы в HTML следует использовать для отображения табличных данных.

  • Таблицы сделаны для табличных данных.
  • CSS создан для стилизации / представления.
person Travis    schedule 28.04.2009

arrow_upward
1
arrow_downward

alt text
(источник: sontag.ca)
Впервые я проделал это упражнение чуть более двух лет назад, когда впервые изучал HTML и CSS. Мое первое решение было похоже на то, что вы видите здесь, только без анонимных контейнерных DIV. Затем у меня возникла идея для веб-страницы, которая проводила параллельное сравнение CSS с таблицей, чтобы доказать, что CSS лучше. Итак, я работал над страницей The Challenge. , опубликовал его, а затем разместил этот вопрос.

Сэм Хаслер отправил ответ через несколько минут, кажется, это было действительно близко. Я видел, что он шел по пути к лучшему решению, чем то, что было у меня. Все его блоки были в порядке, а мои - нет. Jacco опубликовал комментарий, в котором спрашивал, почему я использовал две вложенные таблицы, а не одну. Конечно, он тоже был прав.

Так что у меня сразу было два Гомера Симпсона «Да!» момента. Я читал другие вопросы и ответы о таблицах и CSS. Кто-то упомянул, что столы центрированы по вертикали. Мой ответ тоже не располагался вертикально, но я подумал, что это возможно. В конце концов, весь смысл в том, чтобы делать все, что может стол, и лучше. К тому времени я загнал себя в угол и выглядел как дурак, поэтому мне пришлось найти ответ.

В конце концов (стесняюсь сказать, сколько это длилось) я придумал решение, приведенное ниже. Затем я смог реализовать свою первоначальную концепцию веб-страницы параллельного сравнения.

Вот объяснение того, как все это работает и почему вам следует использовать CSS

Ответ Чарли ...

<!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>
person Diogenes    schedule 14.03.2009
comment
Престижность для получения vertical-align: middle для работы, я пробовал и потерпел неудачу. - person Sam Hasler; 14.03.2009
comment
Хммм, используя CSS для объявления DIV, который будет обрабатываться, как если бы это была таблица, потому что вы не хотите использовать таблицу ... Похоже на погоню за своим собственным хвостом. - person Jacco; 14.03.2009
comment
Нет, я хотел, чтобы DIV центрировал контент по вертикали, и это было вполне разумно. Мое предпочтение использовать таблицы (или нет) не имеет ничего общего с необходимостью центрировать что-то в коробке. - person Diogenes; 14.03.2009
comment
Эти хаки для вертикального выравнивания не работают для меня в IE7. (Я нахожусь в перспективе, если это имеет значение) - person Sam Hasler; 14.03.2009
comment
Хаки IE не будут автоматически центрировать контент по мере его изменения, и, честно говоря, я понятия не имею, как они работают. Если Vista будет другой, это не будет большим сюрпризом. - person Diogenes; 15.03.2009
comment
Я сделал снимок браузера с IE6 и IE8. IE6 был испорчен, но IE8 выглядел хорошо. Похоже, что IE8 даже проигнорировал взлом IE, который был там (хотя это трудно сказать по SS). Таким образом, блочная модель IE8 имеет несколько существенных улучшений. Это должно облегчить жизнь всем нам. - person Diogenes; 15.03.2009
comment
Я понимаю, в чем проблема, хаки нужно менять всякий раз, когда меняется контент: jsbin.com/ogume, который действительно не лучше, чем решение, которое я опубликовал в комментариях к моему ответу. - person Sam Hasler; 16.03.2009
comment
Да, это не совсем вертикальное центрирование в IE, а ручное позиционирование по центру. Диоген, он не отображается правильно в IE6, потому что IE6 не поддерживает селекторы потомков. - person Prestaul; 16.03.2009
comment
@Sam - хорошо, я удалил свой статус "принятый ответ" (это было плохим тоном, но у меня не было голосов, и я не мог голосовать за себя, и это то, что я в итоге сделал. Я все еще изучаю веревки здесь. - person Diogenes; 17.03.2009
comment
@Sam - так что моя CSS-душа не работает для IE7, но я думаю, что она работает для IE8. Кажется, работает во всех других браузерах. Решения Table работают со всем. Возникает вопрос - действительно ли таблицы настолько плохи? ;-) - person Diogenes; 17.03.2009
comment
Минимальные действия по этому вопросу сейчас, даже проголосовали против, поэтому я снова выбираю ответ Чарли в качестве своего выбора, даже если он не самый лучший из возможных. Спасибо всем, кто в этом помогал! - person Diogenes; 25.03.2009
comment
@Diogenes, да, это я проголосовал за этот ответ, хотя это было до того, как я понял, что вертикальное центрирование не выполняется автоматически. Также можно упростить разметку и CSS, используя float прямо на 2 прямоугольниках вместо top: -35px на 5 прямоугольниках: jsbin .com / upabe / edit - person Sam Hasler; 25.03.2009

arrow_upward
0
arrow_downward

Вот пример, который не использует абсолютное позиционирование, не использует ячейку таблицы и действителен в IE6-8, FF и т. Д.

<!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>
person pinxi    schedule 14.01.2010