HTML--表格

时间 2019-11-20

标签 html 表格栏目 HTML 繁體版

原文原文链接

直接上例子html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <p>每一个表格由table标签开始，border属性设置table的边框宽度</p>
    <p>每一个表格行由tr标签开始</p>
    <p>每一个表格数据由td标签开始</p>
    <h4>两行三列以下</h4>
    <table border="1">
        <!-- 第一行数据 -->
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <!-- 第二行数据 -->
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>
    
</body>
</html>

表格由<table>标签来定义。每一个表格均有若干行(由<tr>标签订义)，每一行被分为若干个单元格(由<td>标签来定义)。2.字母td指的是表格数据(table data)，即数据单元格内容。数据单元格内容包含文本、图片、列表、段落等。spa

表格的表头使用<th>标签来定义，例子以下code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <table border="1">
        <tr>
            <th>数据一</th>
            <th>数据二</th>
            <th>数据三</th>
        </tr>
        <!-- 第一行数据 -->
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <!-- 第二行数据 -->
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>

</body>
</html>

3.跨行或者跨列的表格单元格
htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <h4>横跨两列的单元格</h4>
    <table border="1">
        <!-- 表格标题-->
        <caption>个人数据</caption>
        <tr>
            <th>数据一</th>
            <th colspan="2">数据二</th>
        </tr>
        <!-- 第一行数据 -->
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>
    <h4>横跨两行的单元格</h4>
    <table border="1">
        <!-- 表格标题-->
        <caption>个人数据</caption>
        <tr>
            <th>数据一</th>
            <td>100</td>
        </tr>
        <tr>
            <th rowspan="2">数据二</th>
            <td>200</td>
        </tr>
        <tr>
            <td>300</td>
        </tr>
    </table>
</body>
</html>

4.单元格间距(cell spacing)
图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <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>

5.在表单元格中排列内容
utf-8

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> This is my HTML</title>
</head >
<body >
    <table border="1" width="400">
        <tr>
            <th align="left">姓名</th>
            <th align="right">张三</th>
            <th align="right">李四</th>
        </tr>
        <tr>
            <td align="left">性别</td>
            <td align="right">男</td>
            <td align="right">女</td>
        </tr>
        <tr>
            <td align="left">年龄</td>
            <td align="right">25</td>
            <td align="right">27</td>
        </tr>
    </table>
</body>
</html>