Лучший способ реализовать позиции табуляции в допустимом XHTML?

, которая принимает только одну ячейку

, это ваш ответ. чтобы обмануть его, вам нужно сделать что-то вроде:

=SUM(CalculateProgressionTaxOfSalary(A2);
     CalculateProgressionTaxOfSalary(A3);
     CalculateProgressionTaxOfSalary(A4);
     CalculateProgressionTaxOfSalary(A5);
     CalculateProgressionTaxOfSalary(A6);
     CalculateProgressionTaxOfSalary(A7);
     CalculateProgressionTaxOfSalary(A8);
     CalculateProgressionTaxOfSalary(A9);
     CalculateProgressionTaxOfSalary(A10))
9
задан Christoph Schiessl 12 October 2008 в 21:14
поделиться

7 ответов

Я нахожу, что списки определения имеют намного больше смысла, чем таблицы здесь. Плавайте dt налево с определенной шириной и имеют его ясный слева. Если или маркировка или данные собираются перенестись, необходимо будет сделать некоторый post-element-float-clearing обман для создания этой работы, но это не кажется на необходимость в этом. (Я думаю, что это стоит того, так или иначе; плюс, сделайте это однажды, и Вы никогда не должны будете делать этого снова.)

Можно даже использовать :after добавить двоеточия автоматически, если Вы не возражаете стряхивать IE6.

9
ответ дан 4 December 2019 в 07:36
поделиться

Не слушайте людей, говорящих, что это - табличные данные. Просто, потому что что-то было представлено в строках, это не делает это таблицей!

Это - большая ситуация для использования dl, dt и dd теги. Это - что-то вроде фрагмента от того, для чего они первоначально предназначаются, но это все еще намного более значимо, чем таблица, промежутки или отделения.

<dl>
    <dt>Street</dt>
    <dd>Example Street 1</dd>
    <dt>City</dt>
    <dd>Vienna</dd>
    <dt>Zip Code</dt>
    <dd>1010</dd>
    <dt>Country</dt>
    <dd>Austria</dd>
</dl>

И CSS:

dt {
    width: 150px;
    float: left;
    clear: left
}
dd {
    float: left;
}

Это - довольно основной CSS - он, вероятно, не будет содержать много ситуаций (например: два ddподряд, действительно длинное dt), но это - запуск. Посмотрите на inline-block свойство для dt, и возможно вместо использования floatлуг, Вы могли установить a left-margin из 150px на dd.

4
ответ дан 4 December 2019 в 07:36
поделиться

Таблицы являются способом пойти.

2
ответ дан 4 December 2019 в 07:36
поделиться

Я думаю, что Вы взяли "таблицы, плохое" понятие до крайности.

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

Что у Вас есть соответствия очень приятно в понятие строк и столбцов с заголовками (<th>) и данные (<td>) – на основе семантики, не только расположения.

Если Вы хотите сделать это более явным, что это - адрес, то используйте adr Микроформат или добавьте a <caption>.

Неправильные подходы:

  • <dl>: "1010" не определение "почтового индекса". Наоборот это имеет немного больше смысла, но отношения так же ясны с <th><td>, это не полагается на CSS и посмотрит идеальный regearless размера шрифта пользователя.
    Если Вы используете <th> будет отлично представлен даже у рыси! Адрес в <dl> без CSS прием будет выглядеть странным.
  • HTML <address> элемент не может подходить для этого, потому что он предназначается только для страницы контактная информация author's/maintainer's. Это также позволяет встроенное содержание только, таким образом, Вы потеряли бы структуру адреса.
17
ответ дан 4 December 2019 в 07:36
поделиться

Как другие упомянули, плавали, элементы являются способом пойти сюда.

Это было бы моим решением:

<p class="details">
    <span class="label">Street:</span>
    Some Street or other.
    <br />

    <span class="label">City:</span>
    A City.
    <br />
</p>

С CSS, который похож на это:

p.details {
    padding-left: 200px;
}

p.details span.label {
    float: left;
    clear: left;
    width: 200px;
    margin-left: -200px;
}

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

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

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

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

0
ответ дан 4 December 2019 в 07:36
поделиться

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

<div class=DetailsRow>
  <div class=DetailsLabel>Street</div>
  <div class=DetailsContent>123 Main Street</div>
</div>
<div class=DetailsRow>
  <div class=DetailsLabel>City</div>
  <div class=DetailsContent>Vienna</div>
</div>
  ...etc

и

div.DetailsRow
{
clear:both;
}

div.DetailsLabel
{
float:left;
width:100px;
color:gray;
}

div.DetailsContent
{
float:left;
width:400px;
}
-1
ответ дан 4 December 2019 в 07:36
поделиться

Или вы можете отбросить всю разумность (и семантику) и воссоздать таблицы с помощью CSS (проверено в Firefox и Chrome):

<html>
<head>
<title>abusing divs</title>
<style type="text/css">
div.details {
    display: table;
}
div.details > div {
    display: table-row;
}
div.details > div > div {
    display: table-cell;
    padding-left: 0.25em;
    padding-right: 0.25em;
}
</style>
</head>
<body>
<div class="details">
    <div>
        <div>Street</div>
        <div>123 Main Street</div>
    </div>
    <div>
        <div>City</div>
        <div>Vienna</div>
    </div>
    <div>
        <div>This is a very very loooong label</div>
        <div>...</div>
    </div>
</div>
</body>
</html>

Шучу.

-2
ответ дан 4 December 2019 в 07:36
поделиться