526互联

Html表格

发布时间 2023-10-01 01:20:05作者: 流水自净

1、表格标签汇总

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格数据。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

2、简单表格

html 表格应由标签 <table></table> 包裹。
html 表格的行由标签<tr></tr>包裹。
html单元格

  1. html 表格有两类单元格：
    • 标准单元格<td></td>
    • 表头单元格<th></th>
  2. td 表示 table data 表格数据，可称为数据单元格、单元格。
  3. th 表示 table head 表头，称为表头单元格，其内文字默认是加粗的。通常是表格的首行。
  4. html表格只能按行排列。即<td></td>和<th></th>只能在<tr></tr>内，不可交换。
  5. 每行中单元格横向排列。视为表格的列。表格的列数由单元格最多的行决定。
  6. 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

一个简单的表格如下：

<table border="1">
	<tr>
		<th>1,1</th>
		<th>1,2</th>
		<th>1,3</th>
	</tr>
	<tr>
		<td>2,1</td>
		<td>2,2</td>
		<td>2,3</td>
	</tr>
</table>

image

表格默认是没有边框的，border="1"设置了一个1像素的边框

3、表格样式

3.1 表格的宽高

表格宽度：

  • <table width="200">固定宽度200像素
  • <table width="80%">动态宽度为父元素宽度的80%。

列宽度：

  • <th width="20">固定列宽度200像素；
  • <th width="40%">动态列宽度，为表格宽度的40%。

表格高度

  • <table height="200">表格高度为200像素

行高

  • <tr height="50">表格高度为50像素
  • <td height="50">表格高度为50像素
  • <th height="50">表格高度为50像素

3.2 表格的对齐方式

align: 水平方向的对齐

  • right 右对齐
  • center 居中
  • left 左对齐

valign：垂直方向的对齐

  • top 顶部
  • middle 居中
  • bottom 底部
  • baseline 与父元素或相邻元素基线对齐

设置表格相对父元素右对齐，且表格不在单独占行，文字会围绕表格。

  • <table algin="right">

指定行内的单元格内容相对单元格右对齐，位于单元格顶部

  • <tr algin="right" valign="top">

指定某单元格内容相对单元格右对齐

  • <td algin="right">
  • <th algin="right">

3.3 表格的颜色

bgcolor 可设置表格和单元格的颜色
设置方法：

  • 颜色名称, 如红色：bgcolor="red"
  • 十六进制, 如蓝色：bgcolor="#0000ff"

整个表格的颜色为红色
<table bgcolor="red">
某行为蓝色
<tr bgcolor="#0000ff">
某单元格为绿色
<td bgcolor="green">

3.4 背景图像

background可设置表格和单元格的背景图像，可接受本机图片路径和图片网址

使用本地图片
<table background="./fish.png">
<tr background="./fish.png">
<td background="./fish.png">

使用网络图片
<table background="https://i01piccdn.sogoucdn.com/ff9ab6ea299c4e06" >
<tr background="https://i01piccdn.sogoucdn.com/ff9ab6ea299c4e06" >
<td background="https://i01piccdn.sogoucdn.com/ff9ab6ea299c4e06" >

3.4 单元格的间距与内边距

cellspacing(间距)：指表格内单元格与单元格、单元格与表格外边框之间的距离。
cellpadding(内边距)：指单元格内容与单元格边框之间的距离。单元格内容宽度由width决定，即内边距不包含在width之内，单元格的边框距离为:内边距+width。

间距和边距都是表格的属性：
<table border="1" cellspacing="10"> 表格内所有单元格间距为10像素。
<table border="1" cellpadding="10"> 表格内所有单元格内边距为10像素。

3.5 单元格合并

colspan跨列合并，值为列数
rowspan跨行合并，值为行数

点击查看代码 
<table border="1" cellpadding="10"> 
	<tr>
		<th width="80" rowspan="2">姓名</th>	
		<th width="40" colspan="2">基本信息</th>
	</tr>
	<tr>
		<th width="40">性别</th>
		<th width="40">年龄</th>
	</tr>
	<tr>
		<td>张三宝</td>
		<td>男</td>
		<td>18</td>
	</tr>
</table>

image

3.6 空单元格

当每行的单元格数量不相同时会出现表格空白:

点击查看代码 
<table border="1">
	<tr>
		<td>111</td>
		<td>222</td>
	</tr>
	<tr>
		<td>211</td>
	</tr>
</table>

image

为避免上述情况影响表格美观，只要确保每行的单元格数量一致，即是空单元格

点击查看代码 
<table border="1">
	<tr>
		<td>111</td>
		<td>222</td>
	</tr>
	<tr>
		<td>211</td>
		<td></td>	<!-- 有时可能需要加空格才能显示 -->
	</tr>
</table>

image

3.7 表格边框

rules 设置表格内单元格的边框线的显示和隐藏

  • all(显示所有边框线)
  • none(没有内边框线)
  • rows(只有行边框线)
  • cols(只有列边框线)
  • group(只有组边框线)

frame 设置表格外边框线的显示和隐藏

  • void 没有外边框
  • box、border 显示所有外边框
  • above 只显示上部的外侧边框
  • below 只显示下部的外侧边框
  • lhs 只显示左部的外侧边框
  • rhs 只显示右部的外侧边框
  • hsides 只显示水平的外侧边框
  • vsides 只显示竖直的外侧边框

表格只显示行间边框线
<table border="1" rules="rows">
image

表格只显示右侧外框线
<table border="1" frame="rhs">
image

表格的标题

caption 设置表格标题，为table标签子元素

点击查看代码 
<table border="1">
			<caption>员工名单</caption>
			<tr>
				<th width="80" rowspan="2">姓名</th>
				<th width="40" colspan="2">基本信息</th>
			</tr>
			<tr>
				<th width="40">性别</th>
				<th width="40">年龄</th>
			</tr>
			<tr>
				<td>张三宝</td>
				<td>男</td>
				<td>18</td>
			</tr>
		</table>

image

4、表格列样式

<col /> 和 <colgroup></colgroup> 用于设置表格的列属性。
当col和colgroup设置同一列时以col为准，col 是仅包含属性的空元素

点击查看代码 
<table border="1">
	<col bgcolor="red" width="50%"/>
	<col span="2" bgcolor="green" />
	<tr>
		<th>编码</th>
		<th>书名</th>
		<th>价格/元</th>
	</tr>
	<tr>
		<td>3476896</td>
		<td>狼人</td>
		<td>53</td>
	</tr>
	<tr>
		<td>2489604</td>
		<td>黑夜</td>
		<td>47</td>
	</tr>
</table>

image

5、表格分组

通过使用 thead(页眉)、tbody（主体）、tfoot（页脚） 标签可以将表格分成多个组成部分。

thead、tbody、tfoot 三个标签都必须在table标签内，必须同时使用，且顺序不能变，tbody可以有多个。

点击查看代码 
<table border="1">
	<thead bgcolor="skyblue">
		<tr>
			<th rowspan="2">姓名</th>
			<th colspan="2">基本信息</th>
		</tr>
		<tr>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody bgcolor="gray">
		<tr>
			<th colspan="3">历史系</th>
		</tr>
		<tr>
			<td>李四强</td>
			<td>男</td>
			<td>20</td>
		</tr>
	</tbody>
	<tbody  bgcolor="pink">
		<tr>
			<th colspan="3">数学系</th>
		</tr>
		<tr>
			<td>周淑玲</td>
			<td>女</td>
			<td>18</td>
		</tr>
	</tbody>
	<tfoot bgcolor="#ffff7f">
		<th colspan="3">
			<font color="blue">清北大学学籍管理系统</font>
		</th>
	</tfoot>
</table>

image