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

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

表格标签

<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

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



目录
相关文章
|
1天前
|
前端开发 C++ 容器
Marp 教程:实现分栏和其他高级排版技巧
本文介绍了如何在 Marp 中实现分栏和其他高级排版技巧。Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作更加高效和专业。文章详细讲解了安装 VSCode 和 Marp 插件、Marp 的基本结构、使用 CSS 实现分栏、多列文本、浮动元素和网格布局等技巧。
9 0
|
6月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
193 1
|
5月前
测试语雀图片嵌入表格(不用通过)
测试语雀图片嵌入表格(不用通过)
|
5月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
40 0
|
7月前
如何利用 HBuilderX 制作图文混排的网页
如何利用 HBuilderX 制作图文混排的网页
307 3
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
87 0
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
231 2
Markdown编辑器学习笔记丨简单好用的排版与记录工具
Markdown编辑器学习笔记丨简单好用的排版与记录工具
|
定位技术
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
444 0
|
前端开发 搜索推荐 索引
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
125 0
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?