表格操作 2.0

2.1 表格的作用是什么？

进行数据的展示

认识HTML表格

• <table>    表格
• <tr>      行
• <td>      单元格
  

语法：
```

...

...

``` 属性：

<border>用于给表格增加边框，输入数值为边框的宽度

<width>用于修改单元格的宽度

试验一下：

效果呢就是这样：

2.2 表格的操作

对应增删改相应的行<tr>和单元格（列）<td>即可实现增加行或列，更改对应单元格内容的操作。
例如删除一列单元格，那就需要将每个<tr>...</tr>中的相对应的<td>...</td>删除

带表头的表格

语法：<th>...</th> 与<td>...</td>同级，放在<tr>...</tr>中 表头会黑体加粗并且居中

带标题的表格

语法：<caption>...</caption>
只有一个,并且要放在<tr>...</tr>内

2.3 带结构的表格

三部分：表头，主体，脚注

• thead：表头（存放标题）
• tbody：主体（存放数据主体）
• tfoot：脚注（放表格的脚注）

（可以不按顺序排放）但是需要写在<tr>外面

以上操作是对表格中的行进行操作，但是不会影响布局，可以按从上向下顺序展示，节省加载时间

2.4 <table>表格属性

属性	值	描述
width	像素，%	表格宽度
align	left,center,right	整个 表格对齐方式
border	像素	表格边框宽度
bgcolor	rgb(x,x,x),#xxx xxx(十六进制),colorname	表格背景颜色
cellpadding	像素，%	单元边沿与内容之间空白
cellspacing	像素，%	单元格之间空白
frame	属性值	规定外侧边框哪个部分可见
rule	属性值	规定内侧边框哪个部分可见

2.5 <tr>标签属性

属性	值	描述
align	left,center,justify,char	行内容水平对齐
valign	top,middle(居中),bottom,baseline	行内容的垂直对齐
bgcolor	rgb(x,x,x),#xxxxxx(十六进制),colorname	行的背景颜色

2.6 <td>和<th>标签属性

属性	值	描述
align	left,center,justify,char	单元格内容水平对齐
valign	top,middle(居中),bottom,baseline	单元格内容的垂直对齐
bgcolor	rgb(x,x,x),#xxx xxx(十六进制),colorname	单元格背景颜色
width	像素，%	单元格宽度
height	像素，%	单元格高度

2.7 表格跨行列（其本质是扩展，推开了原来的）

跨列属性colspan:

<td colspan="2">...</td> 就是将这行的，和下一列粘到一起

跨行属性rowspan:

<td rowspan="2">...</td> 就是将这列的，和下一行粘到一起

进行跨行或跨列操作的时候，需要将多余行或列删除掉

<table width="500px" border="1px"  bgcolor="pink" cellpadding="10px" cellspacing="10px" frame="below" >						<!--tr是行 ，td是这一行的单元-->

	
	<!--这里的thead，tbody，tfoot都可以在css中进行渲染-->

	<thead> 		<!--标签内是表头，可以很多行很多列-->
	<tr align="left">
		<caption><h3>这个是表头</h3></caption>			
		<td colspan="2">1,1</td><!--把这一列和下一列左右粘合-->
		<td>1,2</td>
	</tr>
	</thead>

	<tr align="center">
		<td >2,1</td>	
		<td >2,2</td>	
	</tr>

	<tr align="right">
		<td rowspan="2">3,1</td>  <!--把这一行和下一行上下粘合,但其本质是扩展，推开了原位置-->
		<td >3,2</td>
	</tr>

	<tr>
		<td>4,1</td>
		<td>4,2</td>
	</tr>

</table>

2.8 表格嵌套

其实就是将一个新的<table>完整结构 写入一个<td>标签内

2.9 div和span

div是“大盒子” 负责包裹大区域的标签
span是“小盒子” 负责包裹小区域的标签，比如文字

2.10 表格布局

要点：

1. 制作布局之前应该从最大的框架开始，之后将表格嵌套进相应的单元格
2. 对于页面width尺寸，尽量多用百分比
3. 表格页面布局时，不设置border边框，作为网页结构的排版，有border不美观
4. 尽量少使用表格嵌套
5. 尽量少使用表格跨行跨列