HTML 表跨度

2018-06-16 16:15 更新

HTML表格跨度

colspan - 列跨度

要將單元格跨多個(gè)列，請(qǐng)使用 colspan 屬性。

分配給 colspan 的值必須是整數(shù)。

您還必須刪除展開后的單元格將覆蓋的單元格元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Color</th>
        <th colspan="2">Size & Votes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2nd Favorite:</th>
        <td>HTML</td>
        <td>HTML</td>
        <td>Oracle</td>
        <td>MySQL</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>XML</td>
        <td colspan="2" rowspan="2">This is a test.</td>
        <td>203</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="5">&copy; 2011 www.o2fo.com Enterprises</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

rowspan - 行跨度

要將單元格跨多行，您可以使用 rowspan 屬性。您分配給此屬性的值是要跨越的行數(shù)。

分配給 rowspan 的值必須為整數(shù)。

如果希望中間列中的一個(gè)單元格跨越所有三行，您將 rowspan 屬性應(yīng)用于單元格2。

您還必須刪除展開后的單元格將覆蓋的單元格元素。

以下代碼將單元格擴(kuò)展為覆蓋多行。

<!DOCTYPE HTML>
<html>
<head>
<style>
td {
  border: thin solid black;
  padding: 5px;
  font-size: x-large
}
</style>
</head>
<body>
  <table border="1">
    <tr>
      <td>1</td>
      <td rowspan="3">2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>9</td>
    </tr>
  </table>
</body>
</html>


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)