老雷html/css开发视频教程之学习html的表格table
查看视频教程或者获取有关《老雷html/css开发视频教程》更多信息

老雷html/css开发视频教程之表格


<table> 表格

<caption> 表格标题

<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化

<col>    标签为表格中一个或多个列定义属性值。

<thead> 表格的页头  

<tbody> 表格内容

<tfoot> 表格的页脚

<tr> 定义行

<td> 定义列

<th> 定义thead中的列


课后练习

自己做个表格 6行6列 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table</title>
		<style>
			table{
				width:100%;
				border-collapse: collapse;
			}
			table td{
				border:1px solid #eee;
			}
			.red{
				color: red;
				width: 100px;
			}
			.flash{
				width: 200px;
			}
		</style>
	</head>
	<body>
		<table>
			<caption>表格的标题</caption>
			<colgroup>
			       
			        <col span="1" class="red">
			        <col span="1" class="flash">
			</colgroup>
			<thead>
				<tr>
					<th>id</th>
					<th>标题</th>
					<th>sss</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>1</td>
					<td>这是标题哦</td>
					<td>sss</td>
				</tr>
				<tr>
					<td>2</td>
					<td>这是标题哦</td>
					<td>sss</td>
				</tr>
			</tbody>
			<tfoot>
			    <tr>
			      <td>Sum</td>
			      <td>$180</td>
				  <td>sss</td>
			    </tr>
			  </tfoot>
		</table>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>标题</th>
					<th>sss</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>1</td>
					<td>这是标题哦</td>
					<td>sss</td>
				</tr>
				<tr>
					<td>2</td>
					<td>这是标题哦</td>
					<td>sss</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>