表格基础1

表格概述

1.表格的作用是组织信息。在CSS之前表格还用于格式化网页布局。

• 表格定义以<table>标记开始，</table>标记结束。
• 表格中的每一行都以<tr>标记开始，</tr>标记结束。
• 每个单元格(table data)以<td>标记开始，</td>标记结束。
• 表格单元格中可以包含文本、图片和其他HTML元素。

注意：表格是一行一行编码的。类似地，一行中的单元格是一个一个编码的。

2.table元素是包含表格化信息的块级元素。常用属性：

属性名称	属性值	用途
align	left(默认)，right，center	表格的水平对齐方式(HTML5中废弃)
bgcolor	有效颜色值	表格的背景颜色(HTML5中废弃)
border	0 01-100	默认：无可见边框(HTML5中废弃) 有可见边框，边框粗细为指定像素值
cellpadding	数值	指定单元格及其边框之间的填充像素值(HTML5中废弃)
cellspacing	数值	指定单元格边框之间的间距像素值(HTML5中废弃)
summary	文本描述	用于提供无障碍访问；对表格中的信息进行描述的一段文字
title	文本描述	表格标题，在某些浏览器中显示成一条工具提示
width	数值或百分比	指定表格宽度(HTML5中废弃)

3.caption元素通常与数据表格配合使用，以描述这个表格的内容。

注意：caption元素紧跟在起始<table>标记之后。

4.表行元素配置表格中的一行。以<tr>标记开始，</tr>标记结束。

   表格数据元素配置表行中的一个单元格，以<td>标记开头，</td>标记结束。

   表头元素配置表行中的一个单元格，特殊作用是配置列标题和行标题，文本居中和加粗显示。以<th>标记开始，</th>标记结束。

表格数据元素和表头元素常用属性：

属性名称	属性值	用途
align	left(默认)，right，center	单元格水平对齐方式(HTML5中废弃)
bgcolor	有效颜色值	单元格背景颜色(HTML5中废弃)
colspan	数值	单元格跨越的列数
rowspan	数值	单元格跨越的行数
headers	表列或者th表头单元格id值	将数据单元格和表头单元格关联；可由屏幕朗读器
scope	row或col	指定表头单元格的内容是行标题还是列标题；可由屏幕朗读器访问
valign	top,middle(默认),bottom	单元格的垂直对齐方式(HTML5中废弃)
width	数值或百分比	单元格宽度(HTML5中废弃)

<table border="1">
<caption>Bird Setting</caption>
      <tr>
           <td colspan="2">Span</td>
      </tr>
      <tr>
            <th>Name</th>
            <th>Phone</th>
      </tr>
      <tr>
            <td>Jack</td>
            <td>857-568-3432
      </tr>
</table>

跨行和跨列

可向th或td元素应用colspan或rowspan属性来改变表格的网格布局。进行复杂的表格配置时，要在纸上画好表格，再输代码。

colspan属性指定单元格所占的列数。rowspan属性指定单元格所占的行数。