表格学习

表格

表格是网页设计中不可或缺的元素，使用表格不仅可以在网页上显示二维表格式的数据，还可以将相互关联的一些信息元素集中定位，从而实现页面布局，使浏览页面简洁、干净。

表格标签

在HTML语法中，表格主要通过3个标签来构成：< table>、< tr>、< td>

• 基本语法
  表格的基本语法：
  内联代码片

<table>
<tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    ...
</tr>
<tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
    ...
</tr>
...
</table>    

• 语法说明
  1.表格标签< table>是双标签，< table>表示表格的开始，< /table>表示表格的结束
  2.标签< tr>用来定义表格的行，也是双标签，< tr>表示一行的开始，< /tr>表示一行的结束
  3.表格的单元格用td定义，< td>表示一个单元格的开始，< /td>表示一个单元格的结束
  4.在一个表格中，可以插入多个< tr>标签，表示多行。< tr>的个数代表表格的行数，每对< tr>…< /tr>之间< td>的个数代表该行单元格的个数。单元里的内容可以是文字、数据、图像、超链接、表单元素等等。

在表格的定义中，除了基本标签< table>、< tr>< td>以外，还可以用< th>定义表头（文字加粗居中显示），用< caption>定义表格的标题，标题默认在表格上方

表格属性

表格具有丰富的属性，创建表格行、单元格的标签< tr>、< td>也有各自的一些属性，通过设置这些属性，可以对表格进行一些修饰，使表格更美观，内容显示更合理

• 表格标签< table>属性
  1.border属性：设置表格边框的粗细，单位是像素。border属性的默认值为0，表示表格无边框
  2.width/height属性：width和height属性分别用于设置表格的宽度和高度，取值可以是像素或百分比，如果取百分比值，表格会随浏览器窗口的大小自动调整
  3.bgcolor属性：设置表格的背景颜色、其值可以是rgb函数、十六进制或英文颜色名称
  4.background属性：设置表格的背景图像，即用一副画像作为表格的背景，属性值可以是相对路径，也可以是绝对路径
  5.cellspacing属性：设置表格中两个单元格之间的距离，即单元格间距。适当增加间距，能使表格不会显得过于紧凑
  6.cellpadding属性：设置单元格的内容与内部边框之间的距离，即单元格编剧。适当增加边距，可以使单元格内容看上去不紧贴边框

• 行标签< tr>的属性
  1.align属性：设置行内容的水平对齐方式，可以取值left、center和right
  2.valign属性：设置行内容的垂直对齐方式，可以取值top、middle和bottom

• 单元格标签< td>的属性
  1.rowspan属性：设置单元格跨越的行数。如果设置跨两行的单元格，即rowspan=“2”，那么下一行的单元格就要少定义一个，即少一个< td>标签。
  2.colspan属性：设置单元格跨越的列数。

表格嵌套和布局

表格前台就是根据插入元素的需要，在一个表格的某个单元格里在插入一个具有若干行和列的表格。对前台表格可以像对其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。但是，嵌套层越多，网页的载入速度就会越慢

                            ~~下篇文章将用表格编写课程表页面~~