• 欢迎访问极客公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入极客公园 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/gitcafe.net
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏极客公园吧

HTML表格【2019-5-10】

前端学习 laoking 6个月前 (05-10) 623次浏览 未收录 0个评论

1、表格标签 table

  • <table></table> 用来定义表格,
  • <tr></tr> 用来定义行,嵌套在 <table></table> 中
  • <td></td> 用来定义行中的单元格,嵌套在 <tr></tr> 中
  • <tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器,可以嵌套任意元素

表格相关的属性如下:

HTML表格【2019-5-10】

三参为0  border   cellspacing    cellpadding   三个参数为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

2、表头标签

  • 表头一般位于表格的第一行或者第一列。
  • 表头标签为 <th></th>,在显示的时候默认会显示为加粗的效果
  • 增加表头时,使用 <th></th> 替代对应位置的 <td></td>即可

下图即是设置了表头的表格。

HTML表格【2019-5-10】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表头</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
    <caption>caption标签是啥?标题?</caption>
    <tr>
        <th>属性</th>
        <th>含义</th>
        <th colspan="2">取值</th>
    </tr>
    <tr>
        <th>border</th>
        <td>单元格边框</td>
        <td>像素值,默认0</td>
        <td rowspan="3">rowspan从当前单元格向下跨三行</td>
    </tr>
    <tr>
        <th>cellspacing</th>
        <td>单元格与单元格边框的间距</td>
        <td>像素值,默认2</td>
    </tr>
    <tr>
        <th>cellpadding</th>
        <td>单元格内容与单元格边框的间距</td>
        <td>像素值,默认1</td>
    </tr>
</table>
</body>
</html>

3、表格结构(了解)

使用表格时,可以将表格分为头部、主体、页脚(页脚有兼容问题)

  • 用来定义头部。必须位于 中,一般包含网页的logo和导航等头部信息。
  • 用来定义表格的主体,一般包含网页中除头部和底部之外的其他内容。
HTML表格【2019-5-10】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thead+tbody</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="1">
    <thead>
    <tr>
        <th>属性名称</th>
        <th>含义</th>
        <th>取值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>colspan</td>
        <td>向右横跨几列</td>
        <td>数值</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>向下竖跨几行</td>
        <td>数值</td>
    </tr>

    </tbody>
</table>
</body>
</html>

4、表格标题标签 caption

  • <caption></caption> 标签用来定义标题的标签
  • 必须写在 <table></table> 中,和 <thead></thead>平级

相关代码可以参考 表头标签 的代码。

5、单元格合并

  • 适用于 <td></td>、<th></th>
  • colspan 跨列合并(水平合并)
  • rowspan 跨行合并(垂直合并)

相关代码可以参考 表头标签 的代码。


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML表格【2019-5-10】
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址