codecamp

HTML 表跨度

HTML表格跨度

colspan - 列跨度

要将单元格跨多个列,请使用 colspan 属性。

分配给 colspan 的值必须是整数。

您还必须删除展开后的单元格将覆盖的单元格元素。

<!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.w3cschool.cn Enterprises</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

rowspan - 行跨度

要将单元格跨多行,您可以使用 rowspan 属性。您分配给此属性的值是要跨越的行数。

分配给 rowspan 的值必须为整数。

如果希望中间列中的一个单元格跨越所有三行,您将 rowspan 属性应用于单元格2。

您还必须删除展开后的单元格将覆盖的单元格元素。

以下代码将单元格扩展为覆盖多行。

<!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>


HTML 表列
HTML 表标题
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }