文章目录
1. 表格基础语法
- table用于声明表格
- tr（row）用于定义行
- 在每一行中有许多的单元格，使用td或者th表示
- th（head）主要用于表示标题行（首行）
- align = center设置表格在网页中的位置
- cellpadding设置表格单元格边框间距离，如默认的话会有复边
- tbody,thead用于声明表格的头部和尾部，使得表格更具有结构
2. 示例
文件内部目录
Eg1: 表格基本语法
源代码
<!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>Document</title>
</head>
<body>
<!-- 这些属性要写到表格的标签<table>中去 -->
<table align="center" border="1" cellpadding = "20" cellspacing = "0" width = "500" height = "250">
<tr>
<th>姓名</th> <th>性别</th> <th>年龄</th>
</tr>
<tr>
<td>刘德华</td> <td>男</td> <td>56</td>
</tr>
<tr>
<td>张学友</td> <td>男</td> <td>57</td>
</tr>
<tr>
<td>郭富城</td> <td>男</td> <td>51</td>
</tr>
</table>
</body>
</html>
测试效果
Eg2: 小说排行榜
源代码
<!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>Document</title>
</head>
<body>
<table align="center" width="500" height = "250" border="1" cellspacing = "0">
<!-- thead里面必须有tr标签，tbody用于放置数据主体 -->
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">贴百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>鬼吹灯</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> </td>
</tr>
<tr>
<td>4</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> </td>
</tr>
<tr>
<td>5</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">贴百科</a> </td>
</tr>
<tr>
<td>6</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">贴百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
测试效果
Eg3: 合并单元格
源代码
<!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>Document</title>
</head>
<body>
<!-- 合并单元格的方式 rowspan，colspan 跨行与跨列 -->
合并单元格的三部曲：
1.确定跨行合并还是跨列合并
2.找到单元格，写上合并方式如td colspan = "2"
3.删除多余的单元格
<table width = "500" height = "249" border="1" cellspacing = "0" >
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
测试效果
写在最后
注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录，主要供自己的学习分享
各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！ ＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知