表格标签 <table></table>
- tr: table row 表示行
- td: table data 表示列
- th: table head 表头 字体加粗并且居中
- caption:表格的标题
- 分组标签 thead 、tbody、tfoot 类似div没有显示效果 为了统一管理
- 属性：border边框粗细 cellspacing单元格间距 cellpadding单元格距内容的距离
案例一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table border="1" cellspacing="0"> <tr> <td align="center" colspan="2" rowspan="2">节</td> <td align="center" colspan="5">周</td> </tr> <tr> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> </tr> <tr> <td rowspan="4">上<br>午</td> <td>1</td> <td>java</td> <td>java</td> <td>java</td> <td>java</td> <td>java</td> </tr> <tr> <td>2</td> <td>C语言</td> <td>C语言</td> <td>C语言</td> <td>C语言</td> <td>C语言</td> </tr> <tr> <td>3</td> <td>oracle</td> <td>oracle</td> <td>oracle</td> <td>oracle</td> <td>oracle</td> </tr> <tr> <td>4</td> <td>C++</td> <td>C++</td> <td>C++</td> <td>C++</td> <td>C++</td> </tr> <tr> <td rowspan="4">下<br>午</td> <td>5</td> <td>java</td> <td>java</td> <td>java</td> <td>java</td> <td>java</td> </tr> <tr> <td>6</td> <td>C语言</td> <td>C语言</td> <td>C语言</td> <td>C语言</td> <td>C语言</td> </tr> <tr> <td>7</td> <td>oracle</td> <td>oracle</td> <td>oracle</td> <td>oracle</td> <td>oracle</td> </tr> <tr> <td>8</td> <td>python</td> <td>python</td> <td>python</td> <td>python</td> <td>python</td> </tr> </table> </body> </html>
Insert title here
| 节 | 周 | |||||
| 一 | 二 | 三 | 四 | 五 | ||
| 上 午 |
1 | java | java | java | java | java |
| 2 | C语言 | C语言 | C语言 | C语言 | C语言 | |
| 3 | oracle | oracle | oracle | oracle | oracle | |
| 4 | C++ | C++ | C++ | C++ | C++ | |
| 下 午 |
5 | java | java | java | java | java |
| 6 | C语言 | C语言 | C语言 | C语言 | C语言 | |
| 7 | oracle | oracle | oracle | oracle | oracle | |
| 8 | python | python | python | python | python | |
案例二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table border="1" cellspacing="0" align="center" width="80%"> <!-- 表格标题 --> <caption>订单列表</caption> <thead> <tr> <th>商品编号</th><!-- table head 表头--> <th>商品名称</th> <th>商品单价</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>杯子</td> <td>30元</td> </tr> <tr> <td>2</td> <td>锤子</td> <td>20元</td> </tr> <tr> <td>3</td> <td>盘子</td> <td>40元</td> </tr> <tr> <td>4</td> <td>锥子</td> <td>10元</td> </tr> </tbody> <tfoot> <tr> <td align="right">总价：</td> <td colspan="2">100元</td> </tr> </tfoot> </table> </body> </html>
Insert title here
| 商品编号 | 商品名称 | 商品单价 |
|---|---|---|
| 1 | 杯子 | 30元 |
| 2 | 锤子 | 20元 |
| 3 | 盘子 | 40元 |
| 4 | 锥子 | 10元 |
| 总价： | 100元 | |