表格的基本设置

在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。

HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。

创建简单的表格

使用table标签创建一个表格。
tr表示表格中的一行。tabrow
tr中可以编写一个或多个th或td。
th表示表头。
td表示表格中的一个单元格。

这样就能创建一个简单的表格，里面也有包含单元格的合并。

合并单元格

合并单元格指将两个或两个以上的单元格合并为一个单元格。
合并单元格可以通过在th或td中设置属性来完成。

横向合并
colspan
纵向合并
rowspan

在上面的代码中我们也已经写出来了。同时应该了解到的是，当我合并前，所合并的那个位置是空的，并没有单元格去占用它

表格的基本样式

1.表格的大致分布

caption表示表格的标题。
thead表示表格的头部。
tbody表示表格的主体。
tfoot表示表格的底部。

表格的头部，主体和底部，在写的时候，不论书写位置和顺序，各自会找各自的位置

之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离。

text-align：设置文本的水平对齐。
vertical-align：设置文本的垂直对齐。
可选值：top、baseline、middle、bottom
border-spacing：边框间距
border-collapse：合并边框
collapse：合并边框
separate：不合并边框

学号	姓名	性别	住址
1	猪八戒	男	高老庄
2	孙悟空	男	花果山
3	沙僧	男	流沙河
1	猪八戒	男	高老庄
2	孙悟空	男	花果山
3	沙僧	男	流沙河
1	猪八戒	男	高老庄
2	孙悟空	男	花果山
3	沙僧	男	流沙河
		合计	？人

代码虽然长，相同的部分只需要复制粘贴就行了。

表格分布的应用

表单

现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这些都是表单的一种
网页中的表单是用来向服务器提交信息的，我们最常用到的表单就是baidu的搜索框

在搜索框填入关键字后，点击搜索按钮，关键字会提交到baidu的服务器，
服务器根据用户输入的关键字进行检索，返回相应信息

那么这些都是怎么组成的呢？

就是我：表单项
input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。

type属性可选值：
text：文本框
password：密码框
submit：提交按钮
radio：单选按钮
checkbox：多选框
reset ：重置按钮

select、option 即:下拉菜单

select用于创建一个下拉列表。
option表示下拉列表中的列表项。
optgroup用于为列表项分组。

textarea 文本域
textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。
可用属性：

cols：文本域的列数
rows：文本域的行数

表单项的设置

fieldset用来为表单项进行分组，会显示一个框出来
legend用于指定每组的名字。
label标签用来为表单项定义描述文字。和文本框可以联合成一个组。即：点中名字就可以直接获取焦点，不需要专门点进文本框去。

A1	A2	A4	A5
B1	B2	B3	A5
C1	C2	C4

表单和表格

表格的基本设置

创建简单的表格

合并单元格

表格的基本样式

表格分布的应用

表单

你可能感兴趣的:(表单和表格)