表格标签<table>

表格标签 <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>

View Code

Insert title here

订单列表
商品编号	商品名称	商品单价
1	杯子	30元
2	锤子	20元
3	盘子	40元
4	锥子	10元
总价：	100元