HTML+CSS第三课：表格标签的使用

知识点：表格标签、表格标签的属性、单元格的跨行与跨列、单元格属性

1、表格的基本结构

表格是由指定的数目的行和列组成的。

单元格：表格的最小单位，一个表格由一个或多个单元格组成。

行：表格是由一个或多个行堆叠而成。

列：表格是由一个或多个列堆叠而成。

2、表格的基本语法

在HTML文档中，表格通过<table>、<tr>、<td>标签来完成

<table><!--定义一个表格开始-->
    <caption>表格标题</caption><!--定义一个表格的标题。可以不用-->
    <tr><!--定义一行标签开始，一组行标签内可以建立多组由<td>标签所定义的单元格-->
        <td>第1行中的第1列</td><!--定义一个单元格标签-->
        <td>第1行中的第2列</td>
        <td>第1行中的第3列</td>
    </tr>
    <tr>
        <td>第2行中的第1列</td>
        <td>第2行中的第2列</td>
        <td>第2行中的第3列</td>
    </tr>
</table><!--定义一个表格结束-->

代码演示效果

注意：

在一个最基本的表格中，必须包含一组<table>标签，一组<tr>标签和一组<td>或<th>标签。
<th></th>定义表头单元格。表格中的文字将以粗体显示。
当表格的单元格内容为空时，在有些浏览器中将不能正常显示单元格的边框，此时可以在该单元格中放置一个空白元素  来解决显示问题

3、表格的属性

属性	值	描述
width	%	规定表格的宽度。
width	pixels	规定表格的宽度。
height	%	规定表格的高度。
height	pixels	规定表格的高度。
border	pixels	规定表格边框的宽度。
bordercolor	颜色	规定表格边框的颜色。
align（水平对齐方式）	left	不赞成使用。请使用样式代替。
	center
	right	规定表格相对周围元素的对齐方式。
bgcolor（表格背景颜色）	rgb(x,x,x)	不赞成使用。请使用样式代替。
	#xxxxxx
	colorname	规定表格的背景颜色。
cellpadding	pixels	规定单元格边框与其内容之间的空白。
cellpadding	%	规定单元格边框与其内容之间的空白。
cellspacing	pixels	规定单元格之间的空白。
cellspacing	%	规定单元格之间的空白。

4、单元格的跨行与跨列

一般使用<td>元素的rowspan属性来实现单元格的跨行操作，使用<td>元素的colspan属性来实现单元格跨列操作。

rowspan跨行：单元格在垂直方向上合并。

colspan跨列：单元格的横向合并。

举例实现单元格的跨行或跨列，可以分为以下几个步骤：

1）首先将无跨行跨列的表格的代码编写好；

2）将需要最终合并成一个单元格的所有单元格视为一组；

3）将该组的第一个单元格里设置跨行或跨列属性，如colspan=“2”；

4）删除这一组中的其他的单元格

<table border="1px">    	<!--单元格的跨列练习-->
   <caption>表格标题</caption>
   <tr>
      <th colspan="2">第一行的第一个单元格</th>
      <th>第一行的第二个单元格</th>
   </tr>
   <tr align="right">
      <td>第二行的第一个单元格</td>
      <td>第二行的第二个单元格</td>
      <td>第二行的第三个单元格</td>
   </tr>
</table>

跨列代码演示结果：

<table border="1px">    	<!--单元格的跨行练习-->
   <caption>表格标题</caption>
   <tr>
      <th rowspan="2">第1行的第一个单元格</th>
      <th>第1行的第二个单元格</th>
      <th>第1行的第三个单元格</th>
   </tr>
   <tr>
      <td>第2行的第二个单元格</td>
      <td>第2行的第三个单元格</td>
   </tr>
</table>

跨行代码演示结果：

注意：同一个单元格，不能出现又跨行、又跨列。

5、单元格的对齐-单元格内文本相对于边框的位置

设置<td>标签的属性

align：水平对齐属性，取值为left、center、right

valign：垂直对齐属性，取值为top、middle、bottom

练习：1、使用table标签制作课程表，并且美化课程表（如给表格设置背景图像/颜色、设置单元格对齐方式等）

思考：如何制作一个宽度为1px的细实线表格（提示：可以设置表格table标签的属性border为0，bgcolor为黑色，cellspacing为1px，tr的背景为白色。原理：表格每一行的白色背景会覆盖表格的黑色背景，只有单元格间距会露出1px的黑色背景。）

练习：2、利用table制作百度首页。

HTML+CSS第三课：表格标签的使用

猜你喜欢