前言

表格，顾名思义就是通过语法画出像excel那样的表格，只不过html中表格除了可
以嵌套文字，还可以嵌图片、链接等等，有一些类似于商品的布局运用了表格
（那种在前端开发中似乎形容成盒子，很形象，不过这个盒子可以装各种各样的
东西）。其实个人理解，表格应该是应用在各种不同元素之间的排版！强迫症的
一大福音啊，不然让攻城狮调这种类似于绝对布局的每个数值的话...细思极恐。

其实表格就是在页面上的一个行向量容器

语法笔记

  • 通过<table> ... </table>标签绘制表格
    1，在这个标签中<mark>border</mark>可以设置表格边框的粗细，默认是0，相当于只有一条线。
    2，<mark>height,width</mark>设置表格高度和宽度。
    3，<mark>bordercolor</mark>设置边框颜色，默认黑色好像。
    4，<mark>align</mark>设置整个表格在页面中的对齐方式，left、center、right。
    5，<mark>bgcolor</mark>设置表格的背景颜***r> 6，<mark>background</mark>设置表格的背景图片，常用！
  • 通过<tr> ... </tr>来绘制表格的行属性(行标签)
    表格能设置的各种属性外（语法也一样）<mark>align，valign</mark>水平位置，垂直位置（top、middle、bottom）
  • 通过<td> ... </td>table data,其实就是每一行中的各个格子的内容
    同样的，他也能够设置各种背景宽、高，还有一个很重要的东西：<mark>colspan</mark>设置该格子的水平跨度，可以理解成合并单元格，<mark>rolspan</mark>设置该格子的垂直跨度，相当于纵向的合并单元格。
    如果行中设置了背景，单元格又设置了，以单元格的为准，就近原则…（Ps：话说英语是不是也有这东西（就近原则）来着？）
  • 通过<th> ... </th>标签绘制表格的表头，自动加粗。当然那些通用的属性这个标签也能用。
  • 通过cellpadding，cellspacing来设置单元格的内边距和单元格之间的间距
  • 通过<caption>...</caption>设置标题同样的也可以设置是放在表头还是底部
  • html中还规定了<thead>、<tbody>、<tfoot>用来统一的设置表格属性，以免更改困难。相当于开个全局变量。
    <mark>value1</mark>水平对齐方式
    <mark>color_value</mark>颜***r> <mark>value2</mark>垂直对齐方式
标签 描述
align 水平对齐方式
valign 垂直对齐方式
bgcolor 设置背景颜色
background 设置背景图像
width 宽度
height 长度
rowspan 水平跨度，水平合并单元格
colspan 垂直合并单元格
#### 以上是利用html画的表格 
<table align="center">
	<tr align="center">
		<th>标签</th>
		<th>描述</th>
	</tr>
	<tr align="center">
		<td>align</td>
		<td>水平对齐方式</td>
	</tr>
	<tr align="center">
		<td>valign</td>
		<td>垂直对齐方式</td>
	</tr>
	<tr align="center">
		<td>bgcolor</td>
		<td>设置背景颜色</td>
	</tr>
	<tr align="center">
		<td>background</td>
		<td>设置背景图像</td>
	</tr>
	<tr align="center">
		<td>width</td>
		<td>宽度</td>
	</tr>
	<tr align="center">
		<td>height</td>
		<td>长度</td>
	</tr>
	<tr align="center">
		<td>rowspan</td>
		<td>水平跨度，水平合并单元格</td>
	</tr>
	<tr align="center">
		<td>colspan</td>
		<td>垂直合并单元格</td>
	</tr>	
</table>

实验代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
<table height="260" border="" width="600" cellspacing="0" align="center" cellpadding="">
    <caption>水果订单表</caption>
    <tr>
        <th >水果</th>
        <th>价格</th>
        <th>数量</th>
    </tr>
    <tr background="img/apple.JPG">
        <td>苹果</td>
        <td>￥6.50/斤</td>
        <td>2</td>

    </tr>
    <tr>
        <td>香蕉</td>
        <td>￥3.50/斤</td>
        <td>10</td>
    </tr>
    <tr>
        <td align="right">合计</td>
        <td colspan="2" align="right">￥48</td>
    </tr>
</table>
</body>
</html>
效果