- HTML-表格table-2018.07.05
- HTMl-表格
- HTML-表格（td）
- 五 HTML-表格
- html-表格
- html-图片/表格/表单
- H5竖屏模板
- html-表格 其他属性值
- 小白学html-表格实现（二）
- html-表格购物车实现
HTML表格-table
基本格式
<table> <tr> <td></td> <th> </th> </tr> </table><tr> 代表行，格式<tr> </tr>
<td>代表列，格式<td></td>,所有的单元格内容都在td中进行输入
<th>代表此行加粗,和td是一样的，只不过字体加粗。实际操作：
<table > <tr> <td> ID</td> <td> NAME</td> <td> QQ</td> </tr> <tr> <td> 001</td> <td> 智智</td> <td> 111111</td> </tr> <tr> <td> 002</td> <td> 佩佩</td> <td> 222222</td> </tr> <tr> <td> 003</td> <td> 娟娟</td> <td> 333333</td> </tr> </table>小白解释：
在界面中有4对<tr></tr>就代表即将输入四行文字
每行文字中包涵了3对<td>,代表表格有三列
但如果不给于单元格附加宽/高的话，会默认为填满页面如图：
四行三列表格已经生成
关于合并单元格
横向合并 colspan;
纵向合并 rowspan
colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数。
一般写：<td colspan="3" style="text-align: center "> 人员统计</td>指定单元格的宽度，高度，用<style>属性添加width和height
<td style="width:25%" ;height:20px>如果增加到表头，那么就是多增加一行一列
<tr > <td colspan="3" style="text-align: center; width: 25%;height: 20px;"> 姓名统计</td> </tr>小白解释：
Q1.为什么colspan中数值等于"3"：
因为横跨的是三列，就是想合并几列单元格就可以写数字几，如果写2，情况如下：
<tr> <td colspan="2" style="text-align: center; width: 25%;height: 20px;"> 姓名统计</td> </tr> <tr> <td> ID</td> <td> NAME</td> <td> QQ</td> </tr>显示如图：
将前两个单元格合并
Q2.为什么第一个<tr>中只有一个<td>？ 如果也写三个<td>会如何？
之所以写一个<tr>因为首行只有标题“人员统计”这一个单元格，所以只需要将所需要的信息写进去就可以。
那么如果多写了两个空的没有用的单元格，会将原来合并的三个视为一组，后面会多加出来两个单元格，也就是说，加上下面的单元格，会变成了5列。<tr> <td colspan="3" style="text-align: center; width: 25%;height: 20px;"> 姓名统计</td> <td> </td> 这里输入两个空的单元格 <td> </td> </tr> <tr> <td> ID</td> <td> NAME</td> <td> QQ</td> </tr>实际效果如图：
多输入两个单元格之后
所以，新手小白要多去实验，不要怕错，老师不可能面面俱到的讲到每一点，更重要的是自己进行实际操作。只有错了才会真的体验到正确的！！
综合操作;
最后的表格样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>这里是title</title> </head> <body> <table style="width: 50%; text-align: center; background-color: yellow;"> <tr> <td colspan="4" style="text-align: center;"> 姓名统计</td> </tr> <tr> <td> ID</td> <td> NAME</td> <td> QQ</td> <td> 备注</td> </tr> <tr> <td> 001</td> <td> 智智</td> <td> 111111</td> <td rowspan="3"> </td> </tr> <tr> <td> 002</td> <td> 佩佩</td> <td> 222222</td> </tr> <tr> <td> 003</td> <td> 娟娟</td> <td> 333333</td> </tr> </table> </body> </html>学习体会：
其实最开始接触表格只是会基本的插入数据，单元格的合并今天刚刚做了实验，其实应该接触一个新的功能就付出一点时间进行学习的，这样可以完整的掌握一些基本的功能！加油啦！➹
相关文章
HTML-表格table-2018.07.05
HTML表格-table 基本格式 代表行，格式 代表列，格式 ,所有的单元格内容都在td中进行输入 代表...
HTMl-表格
一、表格介绍 table：代表是一个表格caption:表头，例如 商品库存表tr：每行td：每列名，左对齐th：...
HTML-表格（td）
1、简介：表格由 标签来定义。行 ,单元格 ,数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
五 HTML-表格
1、作用 以表格形式将数据显示出来，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2 、...
html-表格
表格标签 ： 表格框架 ： 表格头部 ： 表格主体 ：表头- - -加粗居中 ：行 ：列...
html-图片/表格/表单
a标签的认识 ’#‘号跳转页面内锚点跳转外部网页跳转内部网页 a标签的伪协议 img的认识 img是一个单标签 ...
H5竖屏模板
【html-头部】 【html-内容区】 为了...
html-表格 其他属性值
添加单线 实现线条的表格 不存在中间镂空 隐藏空单元 实现效果就是 如果存在空白的表格 不会有单线的存在 斜线分...
小白学html-表格实现（二）
在上一篇文章中我们介绍了列表的实现，戳这里列表实现。在网页中，我们经常能看到各式各样的表格，所以我们就来学习一下表...
html-表格购物车实现
今天要实现的表格是这样的 设置表格的边框 可以看出这个表格是有边框的，所以我们需要设置border 设置表格的题目...
本文标题：HTML-表格table-2018.07.05
本文链接：https://www.haomeiwen.com/subject/hltpuftx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
网友评论