使用多行和多列

时间:2018-04-19 17:23:39

标签: html css html5

我正在尝试制作这样的东西。 enter image description here

我正在尝试添加行和列,但有点卡住了。创建表是我被困的地方。我知道如果我可以创建表格,如何添加表格所需的信息。任何帮助将不胜感激。

到目前为止,我有这个:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <table border="5">
    <tr>
      <th>Month</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td> 200</td>
    </tr>
    <tr>
      <tr>
        <td height="100"> Row 1</td>
      </tr>
      <tr>
        <td height="100"> Row 2 </td>
      </tr>
      <tr>
        <td height="100"> Row 3 </td>
      </tr>
    </tr>
  </table>
  <p><a href="index.html"> Link back to Home Page!</a></p>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您只需要使用rowspancolspan属性的,然后重复该模式:

&#13;
&#13;
table {
  width: 100%;
}

td {
  text-align: center;
}

table, th, td {
  border: 1px solid;
}
&#13;
<table>
    <!--tr can also omit this row just for the clarity that "Row 2" really is the second row inside the table layout; on the other hand, you might leave it because of the design purposes -->
    <th colspan="4">Month</th>
  <!-- /tr -->
  <tr>
    <td rowspan="3">January</td>
    <th colspan="3">Heading</th>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td rowspan="3">February</td>
    <th colspan="3">Heading</th>
  </tr>
  <tr>
    <td>Row 5</td>
    <td>Row 5</td>
    <td>Row 5</td>
  </tr>
  <tr>
    <td>Row 6</td>
    <td>Row 6</td>
    <td>Row 6</td>
  </tr>
  <tr>
    <td rowspan="3">March</td>
    <th colspan="3">Heading</th>
  </tr>
  <tr>
    <td>Row 8</td>
    <td>Row 8</td>
    <td>Row 8</td>
  </tr>
  <tr>
    <td>Row 9</td>
    <td>Row 9</td>
    <td>Row 9</td>
  </tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这将是你的表结构

RewriteEngine On

RewriteCond %{THE_REQUEST} \s/+(puzzles/index/)[^/?]+/?[\s?] [NC]
RewriteRule ^ /%1? [L,R=301]