Создание ориентированной на столбцы таблицы в HTML - PullRequest
Новая
       8

Создание ориентированной на столбцы таблицы в HTML

3 голосов
/ 09 февраля 2012

Я пытаюсь найти способ разместить таблицу на веб-странице, в которой столбцы содержат строки (рисунок 2), а не наоборот (рисунок 1).

Создание таблицыв котором строки содержат столбцы просто из-за тега TR, но нет соответствующего тега TC, чтобы таблицы могли работать наоборот.

Мне удалось найти этотОдиночное предложение в W3C, но оно не было принято и, похоже, никуда не ушло.

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

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

Рисунок 1: Три строки, каждая из которых содержит несколько столбцов:

enter image description here

Рисунок 2: Три столбца, каждый из которых содержит несколько строк:

enter image description here

Ответы [ 3 ]

3 голосов
/ 09 февраля 2012

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

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

<div class="table">
    <div class="column">
        <div class="row colspan2">

        </div>
        <div class="row"></div>
    </div>
    <div class="column">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column">
        <div class="row"></div>
        <div class="row colspan2"></div>
    </div>
</div>

Классы CSS должны были бы немного поиграться, чтобы понять все правильно. РЕДАКТИРОВАТЬ: я имел дело с jsfiddle , но размеры являются статическими, поэтому он не очень гибкий.

CSS это 

.row{
    background-color:red;
    height: 50px;
    border: 1px black solid;
}
.column{
    width: 100px;
    height: 100px;
    text-align:left;
    float:left;
}
.table{
    height: 200px;
    float:left;
}

.colspan2{
    height: 100px;
}
1 голос
/ 09 февраля 2012

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

<table>
  <tr>
    <td>
      <ul>
        <li>Row 1</li>
        <li>Row 2</li>
        <li>Row 3</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>Row 1</li>
        <li>Row 2</li>
        <li>Row 3</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>Row 1</li>
        <li>Row 2</li>
        <li>Row 3</li>
      </ul>
    </td>
  </tr>
</table>
0 голосов
/ 09 февраля 2012

Вы можете определить основную таблицу с одной строкой и тремя столбцами.И тогда каждый столбец в основной таблице может содержать таблицу (или любой другой HTML-контейнер) внутри.Как то так: 

<table>
  <tr><td>
        <table>This is your first columns</table>
  </td></tr>
  <tr><td>
        <table>This is your second columns</table>
  </td></tr>
  <tr><td>
        <table>This is your third columns</table>
  </td></tr>
...