Question

我有这些代码：

table {
  margin-left: 20px;
  margin-right: 20px;
  border:  solid blue;
  border-collapse: collapse;
}

h1 {
  color: red;
  border-bottom: thin dotted red;
}

td, th {
  border: thin dotted gray;
  padding: 5px;
}

th {
  color: orange;
  background-color: gray;
}

td:first-child {
  color: orange;
  background-color: gray;
}

caption {
  font-style: italic;
  padding-top: 50px;
}

#bullets ul {
  list-style: square;
}

.bullets li {
   list-style: circle;
}

<!DOCTYPE html>
<html>
  <head>  
      <meta charset="utf-8">
      <title>Schudule</title>
    <link rel="stylesheet" href="style.css">
  </head>

<body>
  <h1>Credit 5 Practical</h1>
  <table>

      <tr>
          <th>Fruit</th>
          <th colspan="2">Pears</th>
          <th colspan="2">Apples</th>
          <th colspan="2">Oranges</th>
          <th colspan="2">Grapes</th>
          <th colspan="2">Kiwi</th>
          <th> Whatever</th>
          <th></th>
          <th></th>
      </tr>

  <tr>
      <td>Color</td>
      <td>Green</td>
      <td>Red</td>
      <td>Orange</td>
      <td>Purple</td>
      <td>Green</td>
  </tr>

  <tr>
      <td>Cost</td>
      <td>
       <table>
          <tr>
              <th>Pound</th>
              <td>$2.50</th>
          </tr>
          <tr>
              <th>Case</th>
              <td>$50.00</td>

          </tr>
      </table>

   </table>
   <div id="bullets">
  <ul>
      <li>Pears</li>
      <ul class="bullets">
          <li>Green</li>
          <li>$2.50 Pound</li>
          <li>$50.00 Case</li>
      </ul>
  </ul>

  <ul>
      <li>Apples</li>
      <ul class="bullets">
          <li>Red</li>
          <li>$1.25 Pound</li>
          <li>$40.00 Case</li>
      </ul>
  </ul>
      <ul>
      <li>Oranges</li>
      <ul class="bullets">
          <li>Orange</li>
          <li>$1.50 Pound</li>
          <li>$75.00 Case</li>
      </ul>
  </ul>
      <ul>
      <li>Grapes</li>
      <ul class="bullets">
          <li>Purple</li>
          <li>$3.50 Pound</li>
          <li>$75.00 Case</li>
      </ul>
  </ul>
      <ul>
      <li>Kiwi</li>
      <ul class="bullets">
          <li>Green</li>
          <li>$2.94 Pound</li>
          <li>$38.75 Case</li>
      </ul>
  </ul>
  </div>
  <div class="container">
  <form><fieldset><legend>Choose your favorite fruit</legend>
  <p>Choose your fruit:</p><select name="characters">
      <option value="Grapes">Grapes</option>
      <option value="Pears">Pears</option>
      <option value="Apples">Apples</option>
      <option value="Kiwi">Kiwi</option>
      <option value="Oranges">Oranges</option>
  </select>
  <p>what color is it?</p><input type="color">
  </fieldset>
  </form>
  </div>
</body>

</html>

This is my end goal.

对作业有困难我没有html进行检查所以我拍了pdf的截图。我做了很多谷歌搜索，并不明白为什么我不能在每个列中嵌套表可以有人帮我谢谢。

Answer 1

您的编码问题很少：

您没有关闭嵌套表格中的<td>和<tr>标记。
从第{2}开始，您没有使用colspan。

看看这个：

＆＃13;

table {
  margin-left: 20px;
  margin-right: 20px;
  border:  solid blue;
  border-collapse: collapse;
}

h1 {
  color: red;
  border-bottom: thin dotted red;
}

td, th {
  border: thin dotted gray;
  padding: 5px;
}

th {
  color: orange;
  background-color: gray;
}

td:first-child {
  color: orange;
  background-color: gray;
}

caption {
  font-style: italic;
  padding-top: 50px;
}

#bullets ul {
  list-style: square;
}

.bullets li {
   list-style: circle;
}

＆＃13;

<h1>Credit 5 Practical</h1>
  <table>

      <tr>
          <th>Fruit</th>
          <th colspan="2">Pears</th>
          <th colspan="2">Apples</th>
          <th colspan="2">Oranges</th>
          <th colspan="2">Grapes</th>
          <th colspan="2">Kiwi</th>
      </tr>

  <tr>
      <td>Color</td>
      <td colspan="2">Green</td>
      <td colspan="2">Red</td>
      <td colspan="2">Orange</td>
      <td colspan="2">Purple</td>
      <td colspan="2">Green</td>
  </tr>

  <tr>
      <td>Cost</td>
      <td colspan="2">
       <table>
          <tr>
              <th>Pound</th>
              <td>$2.50</td>
          </tr>
          <tr>
              <th>Case</th>
              <td>$50.00</td>

          </tr>
      </table>
      </td>
      
      <td colspan="2">
       <table>
          <tr>
              <th>Pound</th>
              <td>$2.50</td>
          </tr>
          <tr>
              <th>Case</th>
              <td>$50.00</td>

          </tr>
      </table>
      </td>
      
      <td colspan="2">
       <table>
          <tr>
              <th>Pound</th>
              <td>$2.50</td>
          </tr>
          <tr>
              <th>Case</th>
              <td>$50.00</td>

          </tr>
      </table>
      </td>
      
      <td colspan="2">
       <table>
          <tr>
              <th>Pound</th>
              <td>$2.50</td>
          </tr>
          <tr>
              <th>Case</th>
              <td>$50.00</td>

          </tr>
      </table>
      </td>
      
      <td colspan="2">
       <table>
          <tr>
              <th>Pound</th>
              <td>$2.50</td>
          </tr>
          <tr>
              <th>Case</th>
              <td>$50.00</td>

          </tr>
      </table>
      </td>
      
      </tr>

   </table>
   <div id="bullets">
  <ul>
      <li>Pears</li>
      <ul class="bullets">
          <li>Green</li>
          <li>$2.50 Pound</li>
          <li>$50.00 Case</li>
      </ul>
  </ul>

  <ul>
      <li>Apples</li>
      <ul class="bullets">
          <li>Red</li>
          <li>$1.25 Pound</li>
          <li>$40.00 Case</li>
      </ul>
  </ul>
      <ul>
      <li>Oranges</li>
      <ul class="bullets">
          <li>Orange</li>
          <li>$1.50 Pound</li>
          <li>$75.00 Case</li>
      </ul>
  </ul>
      <ul>
      <li>Grapes</li>
      <ul class="bullets">
          <li>Purple</li>
          <li>$3.50 Pound</li>
          <li>$75.00 Case</li>
      </ul>
  </ul>
      <ul>
      <li>Kiwi</li>
      <ul class="bullets">
          <li>Green</li>
          <li>$2.94 Pound</li>
          <li>$38.75 Case</li>
      </ul>
  </ul>
  </div>
  <div class="container">
  <form><fieldset><legend>Choose your favorite fruit</legend>
  <p>Choose your fruit:</p><select name="characters">
      <option value="Grapes">Grapes</option>
      <option value="Pears">Pears</option>
      <option value="Apples">Apples</option>
      <option value="Kiwi">Kiwi</option>
      <option value="Oranges">Oranges</option>
  </select>
  <p>what color is it?</p><input type="color">
  </fieldset>
  </form>
  </div>

＆＃13;

我没有对你的CSS或应该在每个表中的值进行更改，我也没有对下面的列表进行任何更改。请进行必要的更改。希望这有用！

嵌套表和colspan

1 个答案: