Как преобразовать таблицу HTML в позиционирование CSS?

Предположим, у меня есть следующий HTML-код:Как преобразовать таблицу HTML в позиционирование CSS?

<form name="marketplace" method="post" action="marketplace"> 
    <table> 
     <tr> 
      <td class="input"><label>Key: <input type="checkbox" name="searchkeys" value="on" id="marketplace_key_checkbox" data-showerrors="false"></label></td> 
      <td class="input"><select name="key" id="marketplace_key_select"></select></td> 
     </tr> 
     <tr> 
      <td class="input"><label>Mod: <input type="checkbox" name="searchmods" value="on" id="marketplace_mod_checkbox" data-showerrors="false"></label></td> 
      <td class="input"><select name="mod" id="marketplace_mod_select"></select></td> 
     </tr> 
    </table> 
</form>

Как бы я получить такое же визуальное представление (если смотреть на http://jsfiddle.net/8H59u/), используя CSS3 безtable с? Я немного потерял, с чего начать, любые советы будут оценены. (Нет, вам не нужно делать мой код)

Также в качестве дополнительного: исправляю ли я, что мы не должны использовать table для размещения позиций?

источник

2013-12-19 skiwi

Строго говоря, вы не должны использовать таблицы для этого. Но я все время. Спроси меня, черт возьми. –

Да, вы правы в том, что вам не следует использовать таблицы для позиционирования, поскольку это обычно рассматривается как плохая практика. Вы должны использовать divs и позиционировать их в css, используя display, float и т. Д. (Но никто не может остановить вас от использования таблиц.) – tjboswell

для плотного позиционирования вы можете использовать 'position: relative' на divs и отрегулировать левое и правое позиционирование как необходимо. – Phlume

http://jsfiddle.net/8H59u/2/

В основном, применяются display:inline-block затем установить фиксированную ширину на них.

источник

2013-12-19 18:11:55

В этом случае используется фиксированное значение с (100px в примере), тогда как для реального имитации поведения таблиц я хотел бы, чтобы ширина была как можно меньше. Было бы также возможно? – skiwi

Нет. Ну, может быть, *, но вам придется поместить два элемента «label» в один контейнер, два «выбрать» в другом ... в основном, перестановку HTML в нечто искалеченное. –

Я думаю, что я поеду с 'table' s still then ... Похоже, мой стремление к совершенству заканчивается здесь, если CSS даже не может имитировать то, что могут делать таблицы, а затем просто заканчивается. – skiwi

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

источник

2013-12-19 18:19:28

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

Да. Таблица для табличных данных: От W3 table section:

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

Избегайте стола в макете, это то, что мы называем Tableless.

Три варианта решения проблемы:

вариант 1: использованием дивы с дисплеем стол/стол-клетки:

display: table; 
display: table-cell;

- не принимаются во всех браузерах.

вариант 2:

display: inline-block; 
width: 20%; 
min-width: 120px; 
max-width: 200px;

вариант 3:

float: left; 
width: 20%; 
min-width: 120px; 
max-width: 200px;

источник

2013-12-19 18:22:42

Кроме того, как дополнительный: Я правильно, что мы не должны использовать таблицу для позиционирования макета?

Да .. !! Вы не должны использоватьTABLE для Layout

HTML

<form name="marketplace" method="post" action="marketplace"> 
    <div id="wrapper"> <div class="leftkey"><label>Key: <input type="checkbox" name="searchkeys" value="on" id="marketplace_key_checkbox" data-showerrors="false"/></label></div> 
    <div class="rightkey"><select name="key" id="marketplace_key_select"><option>Test</option></select></div> 
    <div class="leftkey"><label>Mod: <input type="checkbox" name="searchmods" value="on" id="marketplace_mod_checkbox" data-showerrors="false"/></label></div> 
    <div class="rightkey"><select name="mod" id="marketplace_mod_select"><option>Test</option></select></div> 
    </div> 
</form>

CSS

#wrapper 
{ 
    width:200px; 
} 
.leftkey 
{ width:100px; 
    display:inline-block; 
    float:left; 
} 
.rightkey 
{ 
    display:inline-block; 
    float:right; 
    width:100px; 
}

Fiddle Demo

источник

2013-12-19 18:23:22

Вы хотите что-то ищите? Просто используйте теги div/span вместо таблиц. Это делает идентичным исходный код и даже не использует CSS.

http://jsfiddle.net/8H59u/13/

<form name="marketplace" method="post" action="marketplace"> 
    <div class="inputParent"> 
     <label>Key: 
      <input type="checkbox" name="searchkeys" value="on" id="marketplace_key_checkbox" data-showerrors="false"> 
     </label> <span class="inputChild"><select name="key" id="marketplace_key_select"><option>Test</option></select></span> 
    </div> 
    <div class="inputParent"> 
     <label>Mod: 
      <input type="checkbox" name="searchmods" value="on" id="marketplace_mod_checkbox" data-showerrors="false"> 
     </label> <span class="inputChild"><select name="mod" id="marketplace_mod_select"><option>Test</option></select></span> 
    </div>

источник

2013-12-19 18:28:35 QuestionMarks

Как преобразовать таблицу HTML в позиционирование CSS?

ответ

Смежные вопросы