html的表格

前言

本文主要介绍HTML的表格

一、简单的实例

代码如下：为简单的两行两列的表格

日期	地点
1.1	csdn

<table border="1">
  <tr>
    <th>日期</th>
    <th>地点</th>
  </tr>
  <tr>
    <td>1.1</td>
    <td>csdn</td>
  </tr>
</table>

二、HTML表格

2.1 表格的基本结构

• <table> 来定义一个表格
• <tr> 来定义表格的行,一个 tr 标签可以包含多个 th、td 元素
• <td> 、<th> 定义若干个单元格，里面可以包含文本、图片等。 th 元素内部的文本通常会居中并加粗，而td元素内的文本通常会左对齐。

2.2 表格的一些用法

1. 合并单元格（表格单元横跨两列）
   我们可以用 colspan 来合并左右的单元格。

语法：<td colspan="value">
value 设置单元格可以横跨的列数，value 不能设置为0，因为 colspan = “0” 浏览器使单元格横跨到列组的最后一列。

 <table border="1">
  <tr>
    <th>日期</th>
    <th>地点</th>
  </tr>
  <tr>
    <td colspan = "2">1.1</td>
 </tr>
</table>

日期	地点
1.1

2. 合并单元格（表格单元纵跨两列）
   我们可以用 rowspan 来合并上下的单元格。

语法：<td rowspan="value">

日期	1.1
	1.1

<table border="1">
  <tr>
    <th rowspan="2">日期</th>
     <td >1.1</td>
  </tr>
  <tr>
    <td >1.1</td>
 </tr>
</table>

3. 边框的设置

语法 <table border="value">

value 代表边框的粗细，当 value = 0 ，则这个表格没有边框。

日期	地点
1.1	csdn

<table border="5">
  <tr>
    <th>日期</th>
     <th >地点</td>
  </tr>
  <tr>
    <td >1.1</td>
    <td >csdn</td>
 </tr>
</table>

4. 背景的设置

背景颜色：<table bgcolor = "red">
背景图片：<table background = "./XX.jpg">
表格单元的背景颜色：<td bgcolor = "red">
表格单元的背景图片：<td background = "./XX.jpg">、

2.2 表格的完整结构

除了<table> 、 <td> 、<tr> 、<th> 外，完整的结构为表头、主体、脚注

• <thead> 表格的头
• <tbody> 表格的主体
• <tfoot> 表格的脚注

完整的模式如下：

<table border="1">
<thead>
<tr>
<th colspan="2">机器</th><th >信息</th>
</tr>
<tr>
<td>名称</td><td>编号</td><td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">dio</td> <td>001</td> <td>100个小面包</td>
</tr>
<tr>
<td>002</td> <td>200个小面包</td>
</tr>
<tr>
<td rowspan="2">老家伙</td><td>001</td><td>free</td>
</tr>
<tr>
<td>002</td><td>free</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tfoot>
</table>

机器		信息
名称	编号	价格
dio	001	100个小面包
	002	200个小面包
老家伙	001	free
	002	free
1	2	3