HTML学习笔记二
HTML表格：
HTML 表格由
标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。
- tr：表示表格的一行。
- td：表示表格的数据单元格。
- th：表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1" align="center" cellpadding="10px" cellspacing="0px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>[email protected]</td>
<td>杭州</td>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>[email protected]</td>
<td>杭州</td>
</tr>
</table>
<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
<thead > 用于定义表格的标题部分.
<tbody > 用于定义表格的主体部分
例子一：表格内的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
例子二：跨行或跨列的表格单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
单元格边距：
<table border="1" cellpadding="10">
使用 cellpadding 来创建单元格内容与其边框之间的空白。
单元格间距：
<table border="1" cellspacing="0">
使用 cellspacing 增加单元格之间的距离。
表格例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小说排行榜</title>
</head>
<body>
<h2>小说排行榜</h2>
<table border="1" cellspacing="0" cellpadding="10px">
<thead>
<tr>
<th>排名</th>
<th>书名</th>
<th>作者</th>
<th>今日搜索量</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>斗罗大陆</td>
<td>唐家三少</td>
<td>1200</td>
<td>
<a href="http://www.baidu.com">贴吧</a>
<a href="http://www.baidu.com">图片</a>
<a href="http://www.baidu.com">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>完美世界</td>
<td>辰东</td>
<td>1120</td>
<td>
<a href="http://www.baidu.com">贴吧</a>
<a href="http://www.baidu.com">图片</a>
<a href="http://www.baidu.com">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>盗墓笔记</td>
<td>南派三叔</td>
<td>860</td>
<td>
<a href="http://www.baidu.com">贴吧</a>
<a href="http://www.baidu.com">图片</a>
<a href="http://www.baidu.com">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>