那些酷炫的网页你也可以做到——第五篇(表格标签)

简介: 那些酷炫的网页你也可以做到——第五篇(表格标签)

表格标签

<table> :封装表格的范围
<caption>标题标签</caption><tr>  :行标签。写在table标签内部,有几行写几个<tr></tr><td>文本内容</td> :单元格标签。写在tr标签内部
<th>文本内容</th> :单元格标签。写在tr标签内部
</tr></table>属性:
    border  :表格的边框,表示最外边框的宽度
    width :表格的宽度
    height  :表格的高度
    ceillpadding  :单元格内文字距离表格线的长度,单位像素px
<tr>  :表格的行
  align :单元中文字的对齐方式。值有:left、center、right
<td>  :单元格           <th>  :单元格
th和td的区别:
  th封装的文本内容默认是 加粗和居中的。
    一般作为表格的表头。
        td重要的属性:合并单元格。


重要的一点:合并单元格

表格单元格合并分为:
    rowspan:行合并。合并几个单元格就是数字几。
    colspan:列合并。合并几个单元格就是数字几。
实例1:
<tableborder="1"cellpadding="10"><tr><th>序号</th><th>姓名</th><th>分数</th></tr><tr><td>1</td><td>张三</td><td>95</td></tr><tr><td>2</td><td>李四</td><td>89</td></tr></table>实例2:
<h4>商品信息</h4><tableborder="1"cellpadding="10"><tr><tdrowspan="2">电器商城</td><td>商品信息:冰箱</td><td>商品价格:500元</td></tr><tr><td>商品信息:洗衣机</td><td>商品价格:600元</td></tr></table>

image.png

image.png

看完这篇文章之后有何感想呢,是不是以前自己觉得很厉害的网页,现在自己做都是简简单单,哈哈哈,那就对了,跟着继续学习,以后还有跟好玩的,加油继续学习不断完善自己的网页。



目录
相关文章
|
安全 大数据 数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇(表单标签)
那些酷炫的网页你也可以做到——第六篇(表单标签)
122 0
那些酷炫的网页你也可以做到——第六篇(表单标签)
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
127 0
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
如何使用Mockplus的表格
Mockplus对于表格的控制,采用的是通过文字来控制外形和数据的方法。稍微熟悉后,你会发现,这种方式可以很快地组装表格。 如图,这里是一个表格: 双击这个表格,进入编辑,看到如下的文字: 好像很难? 别急,我们马上就能明白文字的意思: 首先来看第一横排(表头)和最后一个横排(列宽控制): 第一横排:"姓名 ^, 年龄 ^v, 拼音, 职位 v" 表示: 此表格是4个纵列,分别是姓名(升序)、年龄(升降序)、拼音、职位(降序)。
1173 0
|
前端开发 Web App开发 JavaScript
如何用纯 CSS 创作一个蝴蝶标本展示框
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84392916 效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
865 0
|
移动开发 前端开发 JavaScript
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
Web前端开发笔记——第二章 HTML语言 第十节 画布标签、音视频标签
|
9月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
50 0
|
前端开发
【网页前端】CSS样式表进阶文本样式
【网页前端】CSS样式表进阶文本样式
105 0
【网页前端】CSS样式表进阶文本样式
|
前端开发 搜索推荐 索引
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
89 0
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
|
9月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
193 2