HTML-表格_html 表格一个单元格中多列名-CSDN博客

本文链接：https://blog.csdn.net/grace666/article/details/52757987

1.表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

2.字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

3.如果不定义边框属性，表格将不显示边框，定义边框用border属性

4.表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

示例：一列

<span style="font-family:Microsoft YaHei;"><html>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h4>一列：</h4>
<th>Heading1</th>
<table border="1">
    <tr>
        <td>100</td>
    </tr>
</table>

</body>
</html></span>

展示效果：

5.在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

如：

<html>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h4>横表</h4>
<caption>我的标题</caption>
<table border="8">
<tr>
    <th>行1</th>
    <th>行2</th>
    <th>行3</th>
</tr>
    <tr>
        <td>100</td>
        <!-- <td> </td> -->
        <!-- <td></td> -->
        <td>200</td>
        <td>300</td>
    </tr>
</table>

</body>
</html>

展示效果：

6.<th>定义表格的表头

7.<caption>定义表格的标题

示例代码及展示效果（见第5点）

8.跨行或跨列的表格

示例代码：

<pre name="code" class="html"><html>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
    <th>
        姓名
    </th>
    <th colspan="2">
        电话
    </th>
</tr>
<tr>
    <td>
        Bill
    </td>
    <td>
        13123456789
    </td>
    <td>
        111 22 333
    </td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border=1>
<tr>
    <th>姓名</th>
    <td>Annie</td>
</tr>
<tr>
    <th rowspan="2">电话</th>
    <td>13012345678</td>
<!--     <td>aaa</td> -->
</tr>
<tr>
    <td>123 45 678</td>
</tr>
</table>

</body>
</html>

展示效果：

9.表格内的标签

示例代码：

<pre name="code" class="html"><h4>表格内的标签</h4>
<table border="1">
<tr>
    <td>
        <p>这是一个段落</p>
        <p>这是另一个段落</p>
    </td>
    <td>这个单元格包含一个表格：
        <table border="1">
            <tr>
                <td>
                    AAA
                </td>
                <td>
                    BBB
                </td>
            </tr>
            <tr>
                <td>CCC</td>
                <td>DDD</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>这个单元格包含一个列表：
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>橘子</li>
        </ul>
    </td>
    <td>Hello</td>
</tr>
</table>

展示效果：

10.单元格的边距（cell padding）和间距（cell spacing）

示例代码：

<html>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h4>没有 cellpadding和cellspacing</h4>
<table border="1">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>带有 cellpadding（单元格边距）</h4>
<table border="1" cellpadding="12">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

<h4>带有 cellspacing（单元格间距）</h4>
<table border="1" cellspacing="10">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

</body>
</html>

展示效果：

11.表格添加背景

示例代码：

<html>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h4>背景颜色：</h4>
<table border="1" bgcolor="red">
    <tr>
        <td>First color</td>
        <td>Row color</td>
    </tr>
    <tr>
        <td>Second color</td>
        <td>RowColor</td>
    </tr>
</table>

<h4>背景图片：</h4>
<table border="1" background="D:\download\testimg2.gif">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>

</body>
</html>

展示效果：

12.表格的单元格添加背景

示例代码：

<html>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h4>单元格背景：</h4>
<table border="1">
    <tr>
        <td bgcolor="red">First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td background="D:\download\testimg2.gif">Second</td>
        <td>Row</td>
    </tr>
</table>

</body>
</html>

展示效果：

13.单元格排列（align）

示例代码：

<html>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<h4>在表格中排列内容:</h4>
<table width="500" border="1">
    <tr>
        <th align="left">消费项目</th>
        <th align="right">一月</th>
        <th align="right">二月</th>
    </tr>
    <tr>
        <td align="left">服装</td>
        <th align="right">￥333</th>
        <th align="right">￥123</th>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <th align="right">￥555</th>
        <th align="right">￥96.5</th>
    </tr>
</table>

</body>
</html>

展示效果：

14.表格的框架属性（frame）

示例代码：

<html>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<p><b>注释：</b>frame属性无法在IE中正确显示</p>
<p>1. Table with frame = "box": </p>
<table frame="box">
    <tr>
        <th>
            Month
        </th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>2. Table with frame = "above": </p>
<table frame="above">
    <tr>
        <th>
            Month
        </th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>3. Table with frame = "below": </p>
<table frame="below">
    <tr>
        <th>
            Month
        </th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>4. Table with frame = "hsides": </p>
<table frame="hsides">
    <tr>
        <th>
            Month
        </th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

<p>5. Table with frame = "vsides": </p>
<table frame="visdes">
    <tr>
        <th>
            Month
        </th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
</table>

</body>
</html>

展示效果：