WEB前端之网页设计③----最新最全详解/如何在网页上创建表格

WEB前端之网页设计③—-最新最全详解/如何在网页上创建表格

一、表格效果图1：

<table border="0px" cellspacing="1px" width="500px" height="200px"  cellpadding="0px" align="center" bgcolor="red" ><caption align="top">学生基本信息</caption><tr  bgcolor="white"><th>姓名</th><th>年龄</th><th>性别</th><th>兴趣</th><th>爱好</th>     </tr><tr  align="center" bgcolor="white"><td>骆腾飞</td><td align="left" >18</td><td>男</td><td>美女</td><td>画画</td>     </tr><tr  align="center"  bgcolor="white"><td>李高璐</td><td>19</td><td>男</td><td>玩电脑</td><td>篮球</td>     </tr></table>

表格效果图二：

图二代码：

<table border="1px" cellspacing="0px" width="500px" height="200px" bordercolor="red" cellpadding="0px" align="center" ><caption align="top">学生基本信息</caption><tr ><th>姓名</th><th>年龄</th><th>性别</th><th colspan="2">兴趣爱好</th>   </tr><tr  align="center" bgcolor=""><td>骆腾飞</td><td align="left" >18</td><td rowspan="2">男</td><td bgcolor="#fafad2">美女</td><td>画画</td>     </tr><tr  align="center"><td>李高璐</td><td>19</td><td>玩电脑</td><td>篮球</td>     </tr></table>

二、table标签及属性详解:

tabel标签	解释
`<table></table>`	table标签是要告诉浏览器我要在这个地方写表格
属性	解释
border=“”	border表示表格的边框线厚度填像素单位px
cellspacing=“”	cellspacing表示单元格和单元格之间距离
cellpadding=“”	cellpadding单元格边框和字体的距离
with=“”	with表示表格的整体宽度单位px
height=“”	height表示表格的整体高度单位px
bgcolor=“”	bgcolor表示表格的背景颜色

三、caption标签及属性详解:

caption标签	解释
`<caption></caption>`	caption中填表格的标题，默认居中加粗，且必须紧跟table标签之后。

四、tr标签及属性详解:

tr标签	解释
`<tr></tr>`	tr标签定义HTML表格的行，
属性	解释
align=”center/lift/right”	规定表格内文本的对齐方式：居中/左对齐/右对齐
bgcolor=“”	bgcolor规定表格行的背景颜色。
charoff=“number”	规定第一个字符的偏移量
valign=“top/bottom”	规定表格行中内容的垂直对齐方式，上对齐/底部对齐

五、th标签及属性详解:

th标签	解释
`<th></th>`	表格的表头标签，通常默认加粗居中。
属性	解释
align=”center/lift/right”	表格中的文本居中/左对齐/右对齐
colspan	表示单元格横跨的列数
rowspan	表示单元格跨越的行数

六、td标签及属性详解:

td标签	解释
`<td></td>`	表格中标准的单元格标签。
属性	解释
align=”center/lift/right”	表格中的文本居中/左对齐/右对齐
colspan	表示单元格横跨的列数
rowspan	表示单元格跨越的行数

结语：差不多就是这些标签了有了这些就可以做一个网页版的宿舍成员统计表了哦；后期的话还会慢慢跟新的，先分享这么多。
上一篇：WEB前端之网页设计②—-最新最全详解/网页常用标签
下一篇：WEB前端之网页设计④—-最新最全详解/网页中的表单
版权声明：非商用自由转载-保持署名-注明出处
署名(TM): TopGradeModel

WEB前端之网页设计③----最新最全详解/如何在网页上创建表格相关推荐

网页设计：Meta标签详解
网页设计:Meta标签详解很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...
cs6导航栏代码html,总算认识网页设计教程|Dreamweaver-CS6工具栏详解
总算认识网页设计教程|Dreamweaver-CS6工具栏详解日期:2019-08-31 16:18:59 浏览:194 核心提示:网页设计教程|DreamweaverCS6工具栏详解.为了更好地使 ...
【WEB前端进阶之路】 HTML 全路线学习知识点梳理（上）
前言 HTML 是一切Web开发的基础,本文专门为小白整理,针对前端零基础的朋友们,手把手教你学习HTML,让你轻松迈入WEB开发的行列. 首先,感谢 @橙子_ 在HTML学习以及本文编写过程中对我的 ...
【web前端】相对路径和绝对路径详解
一.绝对路径绝对路径: 绝对:真真地存在你电脑上的实际路径.比如你的window系统的C盘下有个ABC文件夹,ABC文件夹下有个file文件.那么绝对路径:C:\ABC\file 二.使用绝对路径的 ...
offer收割攻略，Web前端面试真题JavaScript系列(带详解)
临近秋招,不少小伙伴开始了求职之路,面试是十分重要的考验,其次也离不开面试题.网上的面试题零零散散,十分混乱,正好我抽时间帮助大家总结一下.难易程度肯定是从简到难,今天是第一篇的续集--基础篇中的Ja ...
web前端录屏技术方案与实现详解
前言随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们开发人员研发过程中,对于部分偶发事件,异常监控系统仅仅只能告知程序出错 ...
Web前端基础知识：ES5及ES6this详解
今天,我们学习一下JavaScript中的this.我们从什么是this,ES5及ES6中this的几种情况进行学习.让this变的so easy,我们这里说的都是非严格模式下. 什么是this th ...
web前端-javascript常用的document对象使用详解
js的dom对象什么是dom对象对象模型常用API 常用属性什么是dom对象 1.dom对象又称document对象 2.每个载入浏览器的 HTML 文档都会成为 Document 对象. 3 ...
Web前端期末大作业---响应式美女健身教练瑜伽馆网页设计（HTML+CSS+JavaScript+）实现
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...

WEB前端之网页设计③----最新最全详解/如何在网页上创建表格

WEB前端之网页设计③—-最新最全详解/如何在网页上创建表格

WEB前端之网页设计③----最新最全详解/如何在网页上创建表格相关推荐

最新文章

热门文章