html 表格标签

作用

来给一堆数据添加表格语义,因为表格是大量数据的一种很好的表现方式

表格标签基本格式

#table代表一个表格
		<table>
#tr代表一行
			<tr>
#td代表一个单元格
				<td></td>
			</tr>
		</table>

表格的属性

• 宽度和高度
  可以给table和td标签使用
  如果给td标签设置高度和宽度,不会改变整个表格的高度和宽度
• 水平对齐align和垂直对齐属性valign
  水平对齐可以给table tr td标签使用
  如果tr td 都设置了 align 单元格的对齐方式以td标签的为准
  垂直对齐只可以给tr和td标签使用
  如果tr td 都设置了 valign 单元格的对齐方式以td标签的为准
• 外边距和内边距
  外边距cellspacing是单元格和单元格之间的距离 默认是2
  内边距cellpadding是单元格和文字之间的间距 默认是1
  只可以给table标签使用

表格的边框属性

border默认为0
如果想要看到边框需要改成大于零的

细线表格的实现

-通过设置table的border为0?
这是错误的,你会发现看上去很别扭
-正确的打开方式
先设置table的bgcolor
再设置tr的bgcolor
再把border改为1

表格里的其它标签

• caption
  用来指定表格的标题
  需要写在table的开始标签后面
  会自动相对于表格居中
• 标题单元格标签th
  用来存放列标题的标签
  会自动加粗,居中

表格的结构

表格里面的数据分为四类

• 表格的标题
• 表头信息
• 表格的主体信息
• 表格的页尾信息

		<table>
			<caption>
				
			</caption>
			<thead>
				<tr>
					<td>
						
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>
						
					</td>
				</tr>
			</tfoot>
		</table>

如果我们没有写tbody浏览器会自动添加
如果写了thead和tfoot,在指定表格的高度时,thead和tfoot有自己默认的高度,不会跟着表格的高度而变化

单元格合并

• 水平单元格合并
  td 的colspan属性可以把一个单元格在水平方向当做多个单元格看待,所以就相当于向后合并,但是原来的单元格就会多出来,所以需要我们手动删除

• 垂直单元格合并
  td 的rowspan属性可以把一个单元格在垂直方向当做多个单元格看待,所以就相当于向下合并,但是原来的单元格就会多出来,所以需要我们手动删除