成绩单表格html,【Web前端HTML5CSS3】15-表格

表格

1、表格

在现实生活中，我们经常需要使用表格来表示一些格式化数据：

课程表、人名单、成绩单...

同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格

在table中使用tr表示表格中的一行，有几个tr就有几行

在tr中使用td表示一个单元格，有几个td就有几个单元格

rowspan 纵向的合并单元格

colspan 横向的合并单元格

A1	B1	C1	D1
A2	B2	C2	D2
AB	B3	C3	D2
A4	B4	C4

2、长表格

可以将一个表格分成三个部分：

头部 thead

主体 tbody

底部 tfoot

th 表示头部的单元格

日期收入支出合计

2000.1.15002003002000.1.15002003002000.1.1500200300合计1200

3、表格的样式

HTML代码

学号	姓名	性别	年龄	地址
1	孙悟空	男	18	花果山
2	猪八戒	男	28	高老庄
3	沙和尚	男	38	流沙河
4	唐僧	男	16	女儿国
1	孙悟空	男	18	花果山
2	猪八戒	男	28	高老庄
3	沙和尚	男	38	流沙河
4	唐僧	男	16	女儿国
4	唐僧	男	16	女儿国
1	孙悟空	男	18	花果山
2	猪八戒	男	28	高老庄
3	沙和尚	男	38	流沙河
4	唐僧	男	16	女儿国

CSS代码

table {

width: 50%;

margin: 0 auto;

border: 1px black solid;

/* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */

/* border-spacing: 0; */

/*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */

border-collapse: collapse;

/* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */

vertical-align: middle;

text-align: center;

}

/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中

所以说，tr不是table的子元素 */

tbody tr:nth-child(odd) {

background-color: rgb(211, 216, 188);

}

td {

border: 1px black solid;

}

其中，

border-spacing：指定边框之间的距离

border-collapse：设置边框的合并

4、表单

表单

在现实生活中表单用于提交数据

在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

form的属性

action：表单要提交的服务器的地址

文本框

注意：数据要提交到服务器中，必须要为元素指定一个name属性值

文本框

密码框

提交按钮

单选框

像这种选择框，必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器

单选框

多选框

下拉列表

选项一

选项二

选项三

5、表单补充

按钮

提交

重置

按钮

上面两种写法实际上效果是一致的，区别在于：

input是自闭合标签，不需要就能结束；button不是自闭合标签，跟一般标签一样是成对出现的

button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签

成绩单表格html,【Web前端HTML5CSS3】15-表格相关推荐

css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行 ...
Web前端，HTML表格相关标签和属性，在网页中表格结构的显示
一.表格的基本标签场景: 在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表代码 <table border=& ...
Web 前端学习之表格
表格 1. 表格定义及属性设置 2. 表格行定义及属性设置 3. 表格单元格定义及属性设置 4. 表格单元格合并结束语 1. 表格定义及属性设置在HTML网页中,想创建表格,就需要使用与表格相关的 ...
【Web前端HTML5CSS3】15-表格
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录表格 1.表格 2.长表格 3.表格的样式 HTML代码 CSS代码 4.表单文本框密码框提交按钮单 ...
【Web前端HTML5CSS3】05-样式继承与其他概念
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位像素屏幕分辨率图像分辨率百分比 e ...
html打印表格自动分页,Web分页打印细线表格+分页打印之终极攻略
Web分页打印细线表格+分页打印之终极攻略发布时间:2009-03-01 23:46:40 作者:佚名我要评论最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...
【Web前端HTML5CSS3】16-过渡与动画
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录过渡与动画 1.过渡 2.动画 3.实战米兔奔跑的少年弹力球酷炫球过渡与动画 1.过渡过渡(tr ...
【Web前端HTML5CSS3】12-字体
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录字体 1. 字体相关的样式 2. font-family 3. 几种字体手写体艺术体乱码字体中文字体 ...
【Web前端HTML5CSS3】02-前端开发准备
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录前端开发准备 1. 离线文档的下载 2. 文本编辑器的选择 Notepad++ Sublime VS Cod ...
【Web前端HTML5CSS3】04-CSS语法与选择器
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录 CSS语法与选择器 1. CSS简介层叠样式表内联样式(行内样式) 内部样式表外部样式表 2. CSS ...

成绩单表格html,【Web前端HTML5CSS3】15-表格

成绩单表格html,【Web前端HTML5CSS3】15-表格相关推荐

最新文章

热门文章