HTML5超详细知识点笔记6---表格的应用

表格的应用

1. 创建表格

创建表格的基本构成

• 语法：

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

• 表格基本标签：

  • <table>：标志表格开始和结束

  • <tr>：标志一行的开始和结束

  • <td>：标志单元格的开始和结束

设置表格的标题—<caption>标签

• 语法：

  <caption>表格的标题</caption>
  

• <caption>用于设置表格标题，位于表格第一行，标题默认居中显示

设置表格的表头—<th>标签

• 语法：

  <table>
  	<tr>
  		<th>表格的表头</th>
  	</tr>
  </table>
  

• <th>用于定义表头，通常位于标题下方或第一行，表头默认加粗显示

2. 设置表格基本属性

设置表格宽度—width属性

<table width="表格宽度">

• 宽度值可为像素值或百分比

设置表格高度—height属性

<table height="表格高度">

• 高度值可为像素值或百分比

设置表格对齐方式—align属性

<table align="对齐方式">

• 对齐方式：
  • left（左对齐）
  • center（居中）
  • right（右对齐）

3. 设置表格的边框

1. 设置表格边框宽度—border属性

<table border="边框宽度">

• 单位为像素；border="0"不显示边框

2. 设置表格边框颜色—bordercolor属性

<table border="宽度" bordercolor="颜色">

• 需配合border属性使用

3. 设置表格内框宽度—cellspacing属性

<table cellspacing="内框宽度">

• 内框宽度单位为像素，控制单元格间距

4. 设置表格内文字与边框的间距—cellpadding属性

<table cellpadding="距离">

• 距离单位为像素，控制文字与边框间距

4. 设置表格背景

1. 设置表格的背景颜色—bgcolor属性

<table bgcolor="颜色">

2. 设置表格的背景图像—background属性

<table background="图像地址">

5. 设置表格的行属性

1. 行高度的控制—height属性

<tr height="高度">

• 高度单位为像素，仅对当前行有效

2. 设置行背景—bgcolor、background属性

<tr bgcolor="颜色">
<tr background="图像地址">

• 用于单独设置行背景

3. 设置行文字的水平对齐方式—align属性

<tr align="对齐方式">

• 默认：标签居中对齐，标签左对齐

4. 设置行文字的垂直对齐方式—valign属性

<tr valign="对齐方式">

• 对齐方式：
  • top（靠上）
  • middle（居中）
  • bottom（靠下）

5. 设置标题行的垂直对齐方式—align属性

<caption align="位置">

• 位置：
  • top（标题在表格上方）
  • bottom（标题在表格下方）
• 水平对齐默认居中，不支持手动设置

6. 设置表格的单元格属性

1. 设置单元格的大小—width、height属性

<td width="宽度" height="高度">

• 单位为像素，设置一个单元格会影响同行或同列单元格

2. 设置单元格中文字的对齐方式—align、valign属性

<td align="水平对齐" valign="垂直对齐">

• 水平对齐：left、center、right
• 垂直对齐：top、middle、bottom

3 设置单元格的背景颜色—bgcolor属性

.<td bgcolor="颜色">

4. 设置单元格的背景图像—background属性

<td background="图像地址">

5. 合并单元格—colspan、rowspan属性

<td colspan="跨列数" rowspan="跨行数">

7. 统一表格样式的结构标签

1. 表首标签<thead>

• 语法：

  <thead bgcolor="颜色" align="水平对齐" valign="垂直对齐">...</thead>
  

• 用于定义表格顶部样式，可包含<tr>、<td>、<th>

2. 表主体标签<tbody>

• 语法：

  <tbody bgcolor="颜色" align="水平对齐" valign="垂直对齐">…</tbody>
  

• 用于统一表格主体样式，每个表格仅一个<tbody>

3. 表尾标签<tfoot>

• 语法：

  <tfoot bgcolor="颜色" align="水平对齐" valign="垂直对齐">…</tfoot>
  

• 用于定义表格底部样式，每个表格仅一个<tfoot>