HTML5表格的介绍与使用

最新推荐文章于 2023-12-16 21:40:49 发布

置顶王大锤子呦

最新推荐文章于 2023-12-16 21:40:49 发布

阅读量1.1k

点赞数 1

分类专栏： HTML5 文章标签： HTML5 表格

本文链接：https://blog.csdn.net/darongzi1314/article/details/47109427

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

（1）表格中的常见元素，<table>用来定义表格,<caption>定义表格标题,<th>表头,<tr>行，<td>单元,<thead>页眉,<tbody>主体,<tfoot>页脚,<col>列属性

（2）表格的常见用法:

1,没有边距的表格（代码如下）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <p>标题</p>
    <table>
        <caption>内部标题</caption>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
        </tr>
    </table>
</body>
</html>

2,表格中的定义表头（代码如下)写在table内部

        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>

3,空的单元格（代码如下）

<table border="10px">
    <caption>内部标题</caption>
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <tr>
        <td></td>//如果要想单元格的内容为空，<td>里面可以不写数据即可
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
    </tr>
</table>

4,带有标题的表格（代码如下）

<table border="10px">
    <caption>内部标题</caption>、、标题
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
    </tr>
</table>

5,表格内的标签（代码如下）

<table border="1px">
    <tr>
        <td>表格1

        </td>
        <td>表格2

        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>菠萝</li>
                <li>香蕉</li>
            </ul>
        </td>
        <td>我想吃了
        </td>
    </tr>
</table>

6,单元格的边距（代码如下）

<table border="1px" cellpadding="10px">

7,单元格的间距（代码如下）

<table border="1px" cellspacing="10px" >

8,表格内的背景颜色和图像（代码如下）

<table border="1px" cellspacing="10px" background="1.png">//背景图片

<table border="1px" bgcolor="#00ffff">//背景颜色

王大锤子呦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录