Html5 1.2 table元素的使用

最新推荐文章于 2021-06-05 04:51:43 发布

原创最新推荐文章于 2021-06-05 04:51:43 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

Html Note 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中table元素的使用方法，包括基本语法、单元格合并、列分组等特性，并通过实例展示了如何构建复杂的表格布局。

一、table元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="test">
    <title>Title</title>
    <style type="text/css">
        tr{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="2" width="360"  ><!--border边框，th标题，tr行，td列，colspan跨列合并单元格，rowspan跨行合并单元格
    caption废弃了-->
        <caption>表格标题</caption>
        <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
        <tr align="center"><td>5</td><td>6</td><td>7</td><td>8</td></tr>
        <tr><td colspan="3"></td><td>9</td></tr>
        <tr><td colspan="4" height="20px"></td></tr>
    </table>
    <br>
<table border="2" width="360" >
    <tr><th rowspan="2">标题1</th><th>标题2</th><th>标题3</th><th>标题4</th></tr><!--标题1将占据两行-->
    <tr><td>6</td><td>7</td><td>8</td></tr>
    </table>
    <br>
<table border="2">
    <tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th><th>标题5</th></tr>
    <colgroup span="1" style="width:100px"></colgroup><!--colgroup对表格列进行分组，span定义分组的列数，style定义列宽-->
    <colgroup span="3" style="width: 240px"></colgroup>
    <colgroup span="1" style="width: 100px"></colgroup>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</body>
</html>

二、效果展示