HTML与CSS教学-第八章 创建表格

 

第八章 创建表格
本章要点
表格基础标记
表格属性
表格高级标记
高级表格

目录：
  8.1 表格基础标记
  8.2 创建简单表格
  8.3 表格的属性
  8.4 表格高级标记
  8.5 创建高级表格

8.1 表格基础标记
在HTML的语法中，表格主要通过3个标记来构成，表格标记、行标记、单元格标记。
<table>..</table>
<tr>..</tr>
<td>..</td>
 <table>标记代表表格的开始，<tr>标记代表行开始，而<td>和</td>之间的就是单元格的内容。
 这几个标记之间是从大到小，逐层包含的关系，由最大的表格，到最小的单元格。
 一个表格可以有多个<tr>和<td>标记，分别代表多行和多个单元格。

8.2 创建简单表格
......

8.3 表格的属性
在创建表格之后，我们还需要对表格的各方面属性进行调整，表格的基本属性如表所示。
width,height宽度，高度
border边框
bordercolor边框颜色
bgcolor背景颜色
background背景图片
cellspacing单元格间距
cellpadding单元格边距
align对齐方式
frame表格边框样式
rules表格内边框样式

1.表格的宽度和高度width,height
 <table width=”value” height=”height”>
 <tr width=”value” height=”height”>
 <td width=”value” height=”height”>
  
 一般情况下只有一列的表格，width写在<table>的标签内，只有一行的表格，height写在<table>的标签内，多行多列的表格，width和height 写在第一行或者第一列的<td>标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height和width, 保证任何一个width和height都是有效的，也就是你改动代码中任何一个width和height的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。

2.表格的边框border
 我们看到，默认情况下表格不显示边框，即border属性值为0，我们可以设置表格边框粗细，单位为像素。
 <table border=”value”>

3.表格边框颜色bordercolor
 添加了5像素的边框后，我们发现，表格上下左右4条边框颜色并不相同。对表格外边框来说，左上边框颜色浅，称为亮边框bordercolorlight，右下边框颜色深，称为暗边框bordercolordark；而单元格的边框相反，左上为暗边框，右下为亮边框。我们可以使用bordercolor属性统一设置4条边框为同一颜色，也可以使用bordercolorlight和bordercolordark分别设置亮边框，暗边框的颜色。
 <table bordercolor=”value”>
 <table bordercolorlight=”value” bordercolordark=”value”>

4.表格背景颜色bgcolor
 通过bgcolor属性可以设置表格、行以及单元格的背景颜色。
 <table bgcolor=”value”>
 <tr bgcolor=”value”>
 <td bgcolor=”value”>

5.表格背景图片background
 除了背景颜色外，我们还可以为表格设置背景图像。
 <table background=”img_url”>

6.单元格间距cellspacing
 可以通过设置cellspacing属性调节单元格与单元格之间的间距。
 <table cellspacing=”value”>

7.单元格边距cellpadding
 单元格边距是指单元格中的内容和边框之间的距离。
 <table cellpadding=”value”>

8.水平对齐方式align
 在水平方向上，对齐方式分别有居左（left）、居中（center）、居右（right）三种。
 <table align=”left”>
 <table align=”left”>
 <table align=”left”>
 在表格标记<table>中使用align属性，是将整个表格居于浏览器的左、中、右方。
 <tr align=”value”>
 在<tr>标记中使用align属性，是将这一行的中所有单元格中的内容相对所处的单元格居左、居中、居右。
 <td align=”value”>
 在<td>标记中使用align属性，是将该单元格中的内容在单元格中居左、居中、居右。

9.表格外边框样式frame
 我们除了可以控制表格边框的粗细颜色外还可以控制边框的显示样式。
 <table frame=”value”>
 使用frame属性可以控制表格外边框样式，属性值如表所示。
above只显示上边框
below只显示下边框
lhs只显示左边框
ths只显示右边框
hsides显示上下边框
vsides显示左右边框
border显示上下左右边框
box显示上下左右边框
void不显示边框

10.表格内边框样式rules
 <table rules=”value”>
 使用rules属性可以控制表格内边框样式，属性值如表所示。
all显示所有的内部边框
none不显示内部边框
groups不显示内部边框
cols仅显示列边框
rows仅显示行边框

8.4 表格高级标记
1.th
 表格的表头标记<th>，通常情况是表格的第一行或第一列，其中的文字可以实现居中并且加粗显示。可以使用<th>替代<td>标记，<th>可以看做带有加粗并居中功能的特殊单元格标记。

2.caption
 在HTML语言中，可以自动通过标记为表格添加标题。
 通过这个标记可以直接添加表格的标题，而且可以控制标题文字的排列属性。
 <caption align=”value” valign=”value”>标题内容</caption>
 <caption>之间的就是标题内容；
 通过align设置标题文字相对表格的水平对齐方式（left、center、right）；
 通过valign设置标题文字相对表格的垂直对齐方式（top、bottom）；

3.thead,tbody,tfoot
 3种行组元素<thead></thead>、<tbody><tbody>、<tfoot><tfoot>使浏览器能够支持长表格主体区域滚动，并保持表头和表尾固定。我们可以为表头、表体和表尾数据分别设置样式。使用行组时，可以有一个或多个tbody元素，以及一个或没有thead和tfoot元素。
 <thead>标记用于定义表格最上端的样式。
 <tbody>标记用于定义表格主体的样式。
 <tfoot>标记用于定义表尾的样式。

4.colgroup
 <colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式，<colgroup>标签很有用，这样就不需要对各个单元和各行重复应用样式了。
 <colgroup> 标签只能在table元素中使用。
 <colgroup span="value"></colgroup>
 value为列数。

5.colspan,rowspan
 在复杂的表格结构中，有的单元格在水平方向上是跨多个单元格的，这就需要使用跨行属性rowspan，有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨列属性colspan。
 <td rowspan=”value”>
 <td colspan=”value”>
 value代表单元格跨的行列数。

8.5 创建高级表格
   网页排版有时会很复杂，在外部需要有一个大的表格来控制总体布局。但是如果一些内部排版的细节也用它来实现，则容易引起行高、列宽的冲突，给表格制作带来困难。如果利用多个嵌套的表格，外部的大表格负责整体的布局，内部的小表格负责各个板块的排版，这样一来就会各司其职，互不冲突。