#html #css
#HTML #css
Вопрос:
У меня есть такая таблица:
<table>
<tr><td>Count A</td><td>12</td></tr>
<tr><td>Count B</td><td>8</td></tr>
</table>
Я новичок в CSS, но из того, что я прочитал до сих пор, я предполагаю, что html должен быть:
<div id="counts-container">
<div class="count">
<div class="count-label">Count A</div><div class="count-number">12</div>
</div>
<div class="count">
<div class="count-label">Count B</div><div class="count-number">8</div>
</div>
</div>
Мне кажется, что я на правильном пути, но я не уверен в том, как написать CSS для этой html-структуры. Я ценю любое предложение.
Хорошо, итак, я просто хочу подтвердить с вами, ребята. Эта таблица должна быть:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td><tr>
</table>
Комментарии:
1. Таблица и так мне нравится, почему бы не сохранить ее в виде таблицы?
2. Можно утверждать, что ваши данные являются табличными, и таблица обоснована. Проблема с вашим подходом div заключается в том, что метки разной длины будут смещать количество отсчетов в сторону и смещаться. Используйте таблицу, когда данные табличные, для этого и предназначена таблица. 🙂
3. Если у вас есть табличные данные, используйте таблицу.
4. Я думаю, что это не табличная структура, потому что, насколько я понимаю, таблица не горизонтальна, она вертикальна.
5. @SBel: Кто сказал, что таблицы должны быть вертикальными (т. Е. иметь строки)?
Ответ №1:
В вашем случае использование <table> в порядке — просто структурируйте его правильно:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td></tr>
</table>
<th> является ячейкой заголовка таблицы.
Если вы не уверены, когда использовать таблицы, а когда нет, я предлагаю вам ознакомиться со спецификацией http://www.w3.org/TR/html4/struct/tables.html
Ответ №2:
Если это табличные данные, тогда просто продолжайте и используйте table . Вот для чего предполагается использовать этот HTML-элемент.
div они предназначены для макета страницы, table они предназначены для отображения табличных данных.
Комментарии:
1. Разве все данные в таблице не являются табличными данными по определению? Следовательно, как кто-либо может неправильно использовать таблицу… хммм, уловка 22 😉
2. Ха-хм, я бы так не сказал. Я всегда рассматривал табличные данные как нечто, состоящее из столбцов и строк, где столбец — это поле, а строка — это запись, и все они связаны. Если у вас есть таблица 2 * 2, отображающая новости в одной, изображения из галереи в другой, контактную форму в третьей и раздел быстрых ссылок в четвертой, я бы не рассматривал эти табличные данные.
3. Я бы рассмотрел это как данные в таблице, хотя
4. @musefan — что не одно и то же… используйте свой здравый смысл.
5. @easwee: Если бы кто-то использовал здравый смысл, можно было бы заметить, что я не всерьез предполагаю, что они одинаковы 😉
Ответ №3:
Вероятно, вам следует использовать <table> тег. Сайты, которые говорят, что они плохие, на самом деле означают, что «злоупотреблять ими по причинам форматирования вместо использования отступов и полей плохо».
Но если вы настроены на использование <div> s, попробуйте это:
#counts-container {display: table;}
.count {display: table-row;}
.count-label, .count-number {display: table-cell;}
Комментарии:
1. Удаление таблицы для замены ее разделениями, которые ведут себя как таблица…. Блестяще! 😀
2. Я знал, что кто-нибудь собирается это предложить!
3. Обратите внимание, что
display:tableподдержка браузера ограничена — IE7 и ниже не будут ее использовать.4. Как ни удивительно, я видел, как это делается множество раз. Правда, не мной 😉
Ответ №4:
контейнер counts становится вашей таблицей, count становится вашей строкой, count-label и count-number становятся вашим столбцом, поэтому вы должны написать css следующим образом
#counts-container,
.count
{
width:400px;
float:left;
}
.count-label
{
width:150px;
float:left;
}
.count-number
{
width:250px;
float:left;
}
{#} для идентификатора и
. для класса
Комментарии:
1. -1, потому что плавающие элементы — это НЕ то же самое, что ячейки таблицы.
2. Нет, если у них разный рост. Нет, если ширина меньше ширины содержимого. Нет, если бы не сотня других причин.
3. плавающий режим ужасен (ИМХО) используйте его как можно реже (ИМХО) (отказ от ответственности: это ИМХО)
4. @SonalKhunt пожалуйста, воздержитесь от использования «text speak», это не SMS; Я отредактировал ваш ответ, откатите его, если вам будет удобнее, используя «bcm», «u», «ur»