Question

当我开始学习HTML和CSS时，我必须创建一些表作为赋值。这些是我想要创造的，

代码： 表1 - 由于某种原因，该表似乎使第四行保留在第三行。

table {
  text-align: center;
}

tr,
td,
th {
  border: 1px solid #000;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
</head>

<body>
  <table>
    <tr>
      <th colspan="17">My Work Plan for the Week</th>
    </tr>
    <tr>
      <td rowspan="5">July</td>
      <th colspan="1"></th>
      <th colspan="3">Monday</th>
      <th colspan="3">Tuesday</th>
      <th colspan="3">Wednesday</th>
      <th colspan="3">Thursday</th>
      <th colspan="3">Friday</th>
    </tr>
    <tr>
      <td rowspan="2">Week 1</td>
      <td rowspan="2" colspan="3">Meeting at ABC-123 Ltd</td>
      <td rowspan="2" colspan="3">Business Lunch at 1pm</td>
      <td rowspan="2" colspan="3">Project due by 5pm</td>
      <td rowspan="2" colspan="3">Web Conference in London</td>
      <td rowspan="2" colspan="3">Early Finish (4pm)</td>
    </tr>
    <tr>
      <td rowspan="2">Week 2</td>
      <td rowspan="2" colspan="3">Business Planning Lunch - 1:30pm</td>
      <td rowspan="2" colspan="9">Networking and Training Conference</td>
      <td rowspan="2">Early Finish (4pm)</td>
    </tr>
  </table>
</body>

</html>

表2 - 我无法正确地将框设置为所需的大小，如图中所示。

tr td {
  border: 1px solid #000;
}

table {
  border-collapse: collapse;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

.orange {
  background: orange;
}

.big {
  width: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
</head>

<body>
  <table>
    <tr>
      <td rowspan="2" colspan="2" class="red" class="big">0</td>
      <td class="blue">1</td>
      <td class="yellow">2</td>
      <td rowspan="2" colspan="2" class="green" class="big">3</td>
    </tr>
    <tr>
      <td rowspan="2" colspan="2" class="orange" class="big">4</td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td rowspan="2" colspan="2" class="green" class="big">5</td>
      <td colspan="2"></td>
      <td rowspan="2" colspan="2" class="yellow" class="big">6</td>
    </tr>
    <tr>
      <td class="blue">7</td>
      <td class="red">8</td>
    </tr>
  </table>
</body>

</html>

我做错了什么？

为什么这些表没有正确对齐？

0 个答案: