- HTMl-表格
- HTML-表格（td）
- 五 HTML-表格
- html-表格
- html-图片/表格/表单
- H5竖屏模板
- HTML-表格table-2018.07.05
- html-表格 其他属性值
- 小白学html-表格实现（二）
- html-表格购物车实现
一、表格介绍
table：代表是一个表格
caption:表头，例如 商品库存表
tr：每行
td：每列名，左对齐
th：每列明，右对齐
border，width：控制表格边框
image.png
image.png
二、表格基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first</title> </head> <body> <table border = "1px" width = "600px" > <caption>用户信息表</caption> <tr> <th>姓名</th> <th>密码</th> <th>邮箱</th> </tr> <tr> <td>xm1</td> <td>111</td> <td>222</td> </tr> <tr> <td>xm2</td> <td>222</td> <td>333</td> </tr> </table> </body> </html>
image.png
二、行，列合并
行合并以上面的为依据，列的合并以左边的为依据
image.png
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first</title> </head> <body> <table border = "1px" width = "600px" > <caption>用户信息表</caption> <tr> <th>商品类别</th> <th>商品名称</th> <th>单位</th> <th>数量</th> </tr> <tr> <th rowspan="2">家电类</th> <th>冰箱</th> <th>台</th> <th>520</th> </tr> <tr> <th>洗衣机</th> <th>台</th> <th>13</th> </tr> <tr> <th>辅料</th> <th>插线板</th> <th>个</th> <th>14</th> </tr> <tr> <th colspan="4">备注：</th> </tr> </table> </body> </html>
image.png
三、属性标签：用于分组设置表格的格式,页眉，内容部分，页脚的设置
image.png
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first</title> </head> <body> <table border = "1px" width = "600px" > <caption>库存商品表</caption> <thead> <tr> <th>商品类别</th> <th>商品名称</th> <th>单位</th> <th>数量</th> </tr> </thead> <tbody> <tr> <th rowspan="2">家电类</th> <th>冰箱</th> <th>台</th> <th>520</th> </tr> <tr> <th>洗衣机</th> <th>台</th> <th>13</th> </tr> <tr> <th>辅料</th> <th>插线板</th> <th>个</th> <th>14</th> </tr> </tbody> <tfoot> <tr> <th colspan="4">备注：</th> </tr> </tfoot> </table> </body> </html>四、对齐方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first</title> </head> <body> <table border = "1px" width = "600px" height="500px"> <caption>库存商品表</caption> <thead> <tr> <th>商品类别</th> <th>商品名称</th> <th>单位</th> <th>数量</th> </tr> </thead> <tbody> <tr> <!--冰箱设置为顶部对齐，valian定义在列组合中内容的垂直对齐方式--> <td rowspan="2">家电类</td> <td valign="top">冰箱</td> <td>台</td> <td>520</td> </tr> <tr> <td>洗衣机</td> <td>台</td> <td>13</td> </tr> <tr> <td>辅料</td> <td>插线板</td> <td>个</td> <td>14</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">备注：</td> </tr> </tfoot> </table> </body> </html>
image.png
五、表格边框与单元格边框
表格边框
单元格边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first</title> </head> <body> <table border = "1px" width = "600px" frame="void"> <caption>库存商品表</caption> <thead> <tr> <th>商品类别</th> <th>商品名称</th> <th>单位</th> <th>数量</th> </tr> </thead> <tbody> <tr> <!--冰箱设置为顶部对齐，valian定义在列组合中内容的垂直对齐方式--> <!--台设为居中对齐--> <td rowspan="2">家电类</td> <td valign="top" bgcolor="red">冰箱</td> <td align = "center">台</td> <td>520</td> </tr> <tr> <td>洗衣机</td> <td>台</td> <td>13</td> </tr> <tr> <td>辅料</td> <td>插线板</td> <td>个</td> <td>14</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">备注：</td> </tr> </tfoot> </table> </body> </html>
image.png
相关文章
HTMl-表格
一、表格介绍 table：代表是一个表格caption:表头，例如 商品库存表tr：每行td：每列名，左对齐th：...
HTML-表格（td）
1、简介：表格由 标签来定义。行 ,单元格 ,数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
五 HTML-表格
1、作用 以表格形式将数据显示出来，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2 、...
html-表格
表格标签 ： 表格框架 ： 表格头部 ： 表格主体 ：表头- - -加粗居中 ：行 ：列...
html-图片/表格/表单
a标签的认识 ’#‘号跳转页面内锚点跳转外部网页跳转内部网页 a标签的伪协议 img的认识 img是一个单标签 ...
H5竖屏模板
【html-头部】 【html-内容区】 为了...
HTML-表格table-2018.07.05
HTML表格-table 基本格式 代表行，格式 代表列，格式 ,所有的单元格内容都在td中进行输入 代表...
html-表格 其他属性值
添加单线 实现线条的表格 不存在中间镂空 隐藏空单元 实现效果就是 如果存在空白的表格 不会有单线的存在 斜线分...
小白学html-表格实现（二）
在上一篇文章中我们介绍了列表的实现，戳这里列表实现。在网页中，我们经常能看到各式各样的表格，所以我们就来学习一下表...
html-表格购物车实现
今天要实现的表格是这样的 设置表格的边框 可以看出这个表格是有边框的，所以我们需要设置border 设置表格的题目...
本文标题：HTMl-表格
本文链接：https://www.haomeiwen.com/subject/wufvprtx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
网友评论