Таблица Html 5 тыс. Выпусков - PullRequest
Новая
       0

Таблица Html 5 тыс. Выпусков

0 голосов
/ 07 января 2020

Я пытаюсь сделать таблицу, как в образце, но мне тяжело сделать так, чтобы она выглядела в образце. Я не могу поместить «Введение в XML», «Действительность: DTD и Relax NG». " и остальное. Мне нужна помощь, чтобы поместить их друг на друга. 

<body>
  <div>
    <table border="1px solid">
      <thead>
        <tr>
          <th rowspan="3">Day</th>
          <th colspan="3">Seminar</th>
        </tr>
        <tr>
          <th colspan="2">Shcedule</th>
          <th rowspan="2">Topic</th>
          <tr>
            <th>Begin</th>
            <th>End</th>
          </tr>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Monday</td>
          <td>8:00 am</td>
          <td>5:00 pm</td>
          <td rowspan="2">Introduction to XML</td>
        </tr>
        <tr>
          <td rowspan="3">Tuesday</td>
          <td>8:00 am</td>
          <td>11:00 am</td>
          <tr>
            <td>11:00 am</td>
            <td>2:00 pm</td>
          </tr>
          <tr>
            <td>2:00 pm</td>
            <td>5:00 pm</td>
            <td>XSL Transformations</td>
          </tr>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Wednesday</td>
          <td>8:00 am</td>
          <td>12:00 pm</td>
          <td>XLS Formating Objects</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>

enter image description here

Ответы [ 2 ]

1 голос
/ 07 января 2020

Несколько ваших <tr> были вложены друг в друга, исправив это (что я и сделал для вас ниже), вы можете выполнить sh половину столбцов, умножив каждую ячейку на 2 и обработав другую клетки нормально. Прочитайте это для получения дополнительной информации о том, как это сделать.

РЕДАКТИРОВАТЬ: Я на самом деле просто закончил писать все это, чтобы злить кого-то, здесь: 

table{
  border-collapse: collapse;
}

th, td{
  border: 1px solid black;
  padding: 4px;
}
<table>
  <tr>
    <th rowspan = "3">
      Day
    </th>
    <th colspan = "3">
      Seminar
    </th>
  </tr>
  <tr>
    <th colspan="2">
      Schedule
    </th>
    <th colspan = "2" rowspan="2">
      Topic
    </th>
  </tr>
  <tr>
    <th>
      Begin
    </th>
    <th>
      End
    </th>
  </tr>
  <!-- table body code -->
  <tr>
    <td rowspan="2">
      Monday
    </td>
    <td rowspan="2">
      8:00 am
    </td>
    <td rowspan="2">
      5:00 pm
    </td>
    <td>
      Introduction to XML
    </td>
  </tr>
  <tr>
    <td>
      Validity: DTD and Relax NG
    </td>
  </tr>
  <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>
  <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:00pm
    </td>
    <td rowspan= "2">
      5:00pm
    </td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>8:00 am</td>
    <td>12:00 pm</td>
    <td>XSL Formatting Objects</td>
  </tr>
</table>
0 голосов
/ 07 января 2020

Вот что я мог бы сделать: 

<table border="1px solid">
    <thead>
       <tr>
           <th rowspan="3">Day</th>
           <th colspan="3">Seminar</th>
       </tr>
       <tr>
           <th colspan="2">Shcedule</th>
           <th rowspan="2">Topic</th>
           <tr>
            <th>Begin</th>
            <th>End</th>
           </tr>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Monday</td>
            <td rowspan="2">8:00 am</td>
            <td rowspan="2">5:00 pm</td>
            <td>Introduction to XML</td>
       </tr>
       <tr>
         <td>Validity:DTD and Relax NG</td>
       </tr>
       <tr>
          <td rowspan="3">Tuesday</td>
          <td>8:00 am</td>
          <td>11:00 am</td>
          <td>XPath</td>
          <tr>
            <td>11:00 am</td>
            <td>2:00 pm</td>
          </tr>
          <tr>
            <td>2:00 pm</td>
            <td>5:00 pm</td>
            <td>XSL Transformations</td>
          </tr>
       </tr>
       <tr>
          <td>Wednesday</td>
          <td>8:00 am</td>
          <td>12:00 pm</td>
          <td>XLS Formating Objects</td>
        </tr>
    </tbody>
</table>

Не уверен, что возможно 1,5 ячейки (возможно, все-таки нужно исправить это время, потому что сейчас оно расплывчато).

...