Альтернатива HTML без таблиц

Question

Может кто-нибудь показать мне html для разметки следующего, не используя таблицы?

______________________________________
|_______|_____________|               |
|_______|_____________|_______________|
|_______|_____________|               |
|_______|_____________|               |
|_______|_____________|_______________|

Третий столбец должен занимать первые две "строки", а затем - следующие три "строки" Первый "столбец "должен иметь одинаковую ширину

Я спрашиваю об этом из-за целого аргумента" Таблицы мертвы для разметки "

ОБНОВЛЕНИЕ: содержимое разметки имеет флажки, текстовые поля и текстовые области

ВЫВОД:

Это было очень поучительно.Я считаю, что я был прояснен с этим философским вопросом.

Мне кажется, что общее правило должно быть таково: не используйте таблицы для всего своего веб-сайта, если есть разделы, похожие на таблицу, используйте таблицу.Крайности «НИКОГДА НЕ ИСПОЛЬЗОВАТЬ СТОЛ» кажутся непрактичными и теоретическими.Аналогичным образом, чрезмерное использование таблиц усложняет обслуживание, а работа с вложенными таблицами глубиной 4 может быть настоящей болью.

Так как схема выше "выглядит как таблица", я собираюсь использовать таблицу.:)

Answer 1

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

Answer 2

Я думаю, что для вашей цели вам следует использовать таблицу, но поскольку вы этого не хотите ... вот что я сделал быстро, используя только <div> s: http://jsfiddle.net/HEfTE/1/

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

Надеюсь, это поможет!

Answer 3

Даже если содержимое не табличное, используйте таблицу, если вам нужно. Большинство аргументов против использования таблицы для макета носят чисто теоретический характер (вы действительно планируете предложить, например, несколько таблиц стилей для своего сайта? Вас интересует, как ваша форма выглядит семантически?) Иногда, особенно в более крупных вопросах макета для сайт, таблицы работают намного лучше, чем CSS.

Используйте то, что работает.

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

Answer 4

Недостаточно информации, чтобы ответить на ваш вопрос.Как сказал Пекка, это стол или нет?

Это форма?Я предполагаю, что если в нем есть текстовые поля, текстовые области и т. Д. Если это форма, вы можете использовать контейнер для двух левых столбцов и один для правого.

<style type="text/css">

div#formLeft {
    float: left;
}

textarea {
   display: block;
}

</style>

<div id="formLeft">
    <label>Form Field 1</label><input type="text" /><br />
    <label>Form Field 2</label><input type="text" /><br />
    <label>Form Field 3</label><input type="text" /><br />
    <label>Form Field 4</label><input type="text" /><br />
    <label>Form Field 5</label><input type="text" /><br />
</div>

<div id="formRight">
    <textarea></textarea>
    <textarea></textarea>
</div>

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

Рекомендации?Стиль label с фиксированной шириной, чтобы он выглядел как табличный.Конечно, отрегулируйте высоту и все, чтобы она подходила.Поскольку поля справа, которые я предполагаю, являются текстовыми областями, просто дайте им идентификаторы и высоту.

Я сделал снимок экрана, чтобы помочь визуализировать мой код, фактически не вводя его. Так я предполагаю, что ваш макетно, конечно, вы можете легко добавить другие столбцы.Просто сделайте formLeft ID, превратившийся в класс, и добавьте другой!

альтернативный текст http://img94.imageshack.us/img94/5341/testbp.gif

Редактировать: Изображение, загруженное в шейкер изображения.Я не могу гарантировать, как долго это будет там.

Удачи!

Answer 5

Кажется, что эти компоненты образуют таблицу ... поэтому я бы использовал таблицу.

Следующее не является таблицей, поэтому не используйте таблицу, чтобы выложить это.(Используйте <div> вместо очевидно)

--------------------------------
|                              |
|                              |
|------------------------------|
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
|         |                    |
--------------------------------

Видите ли вы разницу между вашим примером и моим?

Answer 6

Формы можно считать табличными данными.Не все согласны с этим, но достаточно, чтобы я назвал это решением 50/50.В этом случае подбросьте монету.

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

Если есть прямые отношения между элементами формы в каждой строке / столбце, зная, что это может помочь нам ответитьвопрос для вас.

Answer 7

Я бы сделал это примерно так (из-за отсутствия каких-либо подробностей я добавил несколько примеров элементов):

<html>
    <head>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            #form {
                width: 400px;
                margin: 10px;
            }
            #textareas {
                width: 145px;
                float: right;
            }
            #textareas textarea {
                width: 145px;
                margin-bottom: 3px;
            }
            #textareas #textarea1 {
                height: 43px;
            }
            #textareas #textarea2 {
                height: 66px;
            }
            .forminput {
                height: 23px;
                width: 250px;
            }
            .forminput span {
                display: block;
                float: left;
                width: 75px;
            }
            .forminput input {
                width: 175px;
            }
        </style>
    </head>

    <body>
        <div id="form">
            <div id="textareas">
                <textarea id="textarea1"></textarea>
                <textarea id="textarea2"></textarea>
            </div>
            <div class="forminput">
                <span>Label 1</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 2</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 3</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 4</span>
                <input type="text" />
            </div>
            <div class="forminput">
                <span>Label 5</span>
                <input type="text" />
            </div>
        </div>
    </body>
</html>

Вы всегда можете сделать это без таблицы.

Answer 8

Вы можете сделать это с DIV с осторожным использованием float: right, float: left и clear: обоим.

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

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

Answer 9

Что такое содержание ?Табличные данные?Если это так, используйте таблицу.