HTML таблица со сложной структурой - PullRequest
Новая
       16

HTML таблица со сложной структурой

2 голосов
/ 05 ноября 2019

У меня возникли трудности при создании таблицы на изображении ниже:

сложная таблица (само изображение не отображается, перейдите по ссылке)

Я искал на стеке потока, но ответ дается без особых объяснений. Ниже приведен код только для сложной строки, то есть строки, которая начинается с ячейки, содержащей «вторник» 

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td rowspan="2">8:00 am</td>
    <td rowspan="2">11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr>
    <td rowspan="2">11:00 am</td>
    <td rowspan="2">2:00 pm</td>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td rowspan="2">2:00 am</td>
    <td rowspan="2">5:00 pm</td>
  </tr>
</table>

. В приведенном выше коде я использую три TR, которые, как ожидается, создадут три строки, нотолько один ряд производится. Результат приведенного выше кода показан ниже. Я не понимаю, почему строка, начинающаяся с "11:00", то есть строка в кружке, находится не на новой строке.

фактический результат (само изображение не отображаетсяПожалуйста, нажмите на ссылку)

Ответы [ 2 ]

1 голос
/ 05 ноября 2019

Вы создали структуру для 6 строк, но в вашей разметке было только 3, а во 2-й строке содержались как составные ячейки из 1-го ряда, так и ячейки, определенные во 2-м ряду. Вот почему браузер пытался расположить их горизонтально.

Чтобы получить желаемый результат, вы должны добавить 3 дополнительные строки в таблицу и распределить ячейки между ними так, чтобы каждая ячейка начиналась в правильной строке («XSL-преобразования»). в 4-й строке, остальные в 1-й, 3-й и 5-й строках соответственно): см. 1-й пример ниже.

Кстати, тот же визуальный результат может быть достигнут только с 4 строками: см. 2-й пример ниже. 

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td rowspan="2">8:00 am</td>
    <td rowspan="2">11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr></tr><!-- needed to accomodate cells with rowspan="2" from above -->
  <tr>
    <td rowspan="2">11:00 am</td>
    <td rowspan="2">2:00 pm</td>
  </tr>
  <tr>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td rowspan="2">2:00 am</td>
    <td rowspan="2">5:00 pm</td>
  </tr>
  <tr></tr><!-- needed to accomodate cells with rowspan="2" from above -->
</table>

<hr>

<table border="1">
  <tr><!-- row 1 -->
    <td rowspan="4">Tuesday</td><!-- spans rows 1-4 -->
    <td>8:00 am</td><!-- spans row 1 only -->
    <td>11:00 am</td><!-- spans row 1 only -->
    <td rowspan="2">XPath</td><!-- spans rows 1-2 -->
  </tr>
  <tr><!-- row 2 -->
    <td rowspan="2">11:00 am</td><!-- spans rows 2-3 -->
    <td rowspan="2">2:00 pm</td><!-- spans rows 2-3 -->
  </tr>
  <tr><!-- row 3 -->
    <td rowspan="2">XSL Transformations</td><!-- spans rows 3-4 -->
  </tr>
  <tr><!-- row 4 -->
    <td>2:00 am</td><!-- spans row 4 only -->
    <td>5:00 pm</td><!-- spans row 4 only -->
  </tr>
</table>
0 голосов
/ 05 ноября 2019

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

<table border="1">
  <tr>
    <td rowspan="6">Tuesday</td>
    <td>8:00 am</td>
    <td>11:00 am</td>
    <td rowspan="3">XPath</td>
  </tr>
  <tr>
    <td>11:00 am</td>
    <td>2:00 pm</td>
    <td rowspan="3">XSL Transformations</td>
  </tr>
  <tr>
    <td>2:00 am</td>
    <td>5:00 pm</td>
  </tr>
</table>

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

...