前端笔记-表格

表格table

创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table，tr，td他们是创建表格的基本标签，缺一不可

tr：元素定义表格行

th：元素定义表头

td：元素定义表格单元

表格属性

align：（left/center/right）不赞成使用。请使用样式替代。规定表格相对周围元素的对齐方式

bgcolor：（rgb（）/#）不赞成使用。请用样式代替。规定表格的背景颜色

border：（px）不赞成使用。规定表格边框的宽度。默认为border=“0”

cellpadding：（px/*/%）规定单元边沿与其内容之间的空白

cellspacing：（px/*/%）规定单元格之间的空白

width：（%**pixels）规定表格的宽度

注意：后三个属性不要加单位

表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中，如下所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

<table border="1" align="right">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <th>张三</th>
        <td>男</td>
        <td>119</td>
    </tr>
    <tr>
        <th>小花</th>
        <td>女</td>
        <td>17</td>
    </tr>
</table>

表格标题caption

<table>
    <caption>我是表格标题</caption>
</table>

caption标签必须紧随table标签之后。你只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

合并单元格（难点）

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把他删除。例如：把3个td合并成一个，那就多余了2个，需要删除。

公式：删除的个数=合并的个数-1

合并的顺序：先上 先坐

<table width="400" height="100" border="1">
    <tr>
        <td>张三</td>
        <td>12</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td colspan="2">不明</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>33</td>
        <td>男</td>
    </tr>
</table>

<table width="400" height="100" border="1">
    <tr>
      <td>张三</td>
      <td>12</td>
      <td rowspan="3">男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>33</td>
    </tr>
</table>

折叠边框border-collapse

将表格折叠为单一边框

table {
    border-collapse: collapse;
}
​
table,
th,
td {
    border: 1px solid blue;
}

标题位置

指定标题相对于表框的放置位置。

caption {
    caption-side: bottom;
}

表单标签（常用）

表单目的是为了收集用户信息

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成

组成部分

表单控件：input select textarea buttom

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

提示信息：label

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：form

他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input控件（最常用）

input标签为单标签，type属性为其最基本的属性。

常用属性	属性值	描述
type	见下表	控制input的类型
name	自定义	控件名称，作为提交数据时的key
value	自定义或输入	input控件中的默认或用户输入的文本
size	正整数	input在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	规定控件容许输入的最大字符数
required	required	必填
readonly	readonly	内容只读
placeholder	文本	用户输入提示文本
multiple	multiple	文件上传可选多文件

type属性分类

常用类型属性	描述	补充
text	单行文本输入框	明文
password	密码输入框	密文
radio	单选按钮	单选
checkbox	复选框	多选
button	普通按钮	多数情况下，用于通过js联动
submit	提交按钮	提交按钮会把表单数据发送到服务器
reset	重置按钮	重置添加会清除表单中的所有数据
image	图像形式的提交按钮	自定义按钮，用的少
hidden	隐藏的输入文本	输入不显示，防止窥屏
file	输入字段和”浏览器“按钮，供文件上传	multiple属性可以开启多文件选择
number新增	仅限数字	只能输入数字
date新增	日期选择	年/月/日
tel 新增	电话号码	非有效限制
time 新增	时间选择	00：00
email 新增	电子邮件	非有效限制
search 新增	查询框	可点击×清除内容

label标签（理解）

label标签为input元素定义标注（标签）

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点

for属性规定label与id值一致的表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件（文本域）

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
    文本内容
</textarea>

下拉菜单

使用select控件定义下拉菜单的基本语法格式如下：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

注意：

1.<select></select>中至少包含一对<option></option>。

2.在option中定义select=“selected”时，当前项即为默认选中项。

表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

常用属性：

1.action

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接受并处理表单数据的服务器程序的url地址。

2.method

用于设置表单数据的提交方式，其取值为get或post。

3.name

用于指定表单的名称，以区分同一页面中的多个表单。

注意：每个表单都应该有自己的表单域