html-表格标签
html-表格标签
一、表格标签
1. 表格的主要作用
表格主要 用于显示､展示数据, 因为它可以让数据显示的非常的规整,可读性非常好｡特别是后台展示数据 的时候,能够熟练运用表格就显得很重要｡一个清爽简约的表格能够把繁杂的数据表现得很有条理｡
总结: 表格不是用来布局页面的,而是用来 展示数据 的.
2.表格的基本语法
<table>
<tr>
<th>表头</th>
<td>数据</td>
</tr>
</table><th>：表头单元格，内容加粗居中
是用于定义表格的标签｡
标签用于定义表格中的行,必须嵌套在 标签中｡
用于定义表格中的单元格,必须嵌套在 标签中｡ 字母 td 指表格数据(table data),即数据单元格的内容｡
：Table Head Cell，表头单元格， ：Table，用于定义表格，是整个表格结构的容器标签，包含表格的所有内容。
：Table Row，用于定义表格中的行，在 标签内部，通过
标签来划分不同的行，每一行包含多个单元格。 ：Table Data Cell，用于定义表格中的单元格，在 标签内部，每个 标签代表一个数据单元格，用于存放具体的数据内容 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表头单元格标签</title> </head> <body> <table> <tr> <th>姓名</th> <th>性别</th> <th> 年龄 </th> </tr> <tr> <td>刘德华</td> <td>男</td> <td> 56 </td> </tr> <tr> <td>张学友</td> <td>男</td> <td> 58 </td> </tr> <tr> <td>郭富城</td> <td>男</td> <td> 51 </td> </tr> <tr> <td>黎明</td> <td>男</td> <td> 57 </td> </tr> </table> </body> </html>运行结果：
3.表格属性
表格标签这部分属性我们实际开发我们不常用 ,后面通过 CSS 来设置.
目的有2个:
记住这些英语单词,后面 CSS 会使用.
直观感受表格的外观形态.
⑴.align：对齐；使一致；使成一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格属性</title> </head> <body> <!-- 这些属性要写到表格标签table 里面去 --> <table align="right"> <tr> <th>姓名</th> <th>性别</th> <th> 年龄 </th> </tr> <tr> <td>刘德华</td> <td>男</td> <td> 56 </td> </tr> <tr> <td>张学友</td> <td>男</td> <td> 58 </td> </tr> <tr> <td>郭富城</td> <td>男</td> <td> 51 </td> </tr> <tr> <td>黎明</td> <td>男</td> <td> 57 </td> </tr> </table> </body> </html>表格在页面的显示位置
center：居中
right：右边
⑵.border：边界；边框；边缘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格属性</title> </head> <body> <!-- 这些属性要写到表格标签table 里面去 --> <table align="center" border="1"> <tr> <th>姓名</th> <th>性别</th> <th> 年龄 </th> </tr> <tr> <td>刘德华</td> <td>男</td> <td> 56 </td> </tr> <tr> <td>张学友</td> <td>男</td> <td> 58 </td> </tr> <tr> <td>郭富城</td> <td>男</td> <td> 51 </td> </tr> <tr> <td>黎明</td> <td>男</td> <td> 57 </td> </tr> </table> </body> </html>加变框，
⑶.cellpadding：单元格内边距；单元格填充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格属性</title> </head> <body> <!-- 这些属性要写到表格标签table 里面去 --> <table align="center" border="1" cellpadding="30"> <tr> <th>姓名</th> <th>性别</th> <th> 年龄 </th> </tr> <tr> <td>刘德华</td> <td>男</td> <td> 56 </td> </tr> <tr> <td>张学友</td> <td>男</td> <td> 58 </td> </tr> <tr> <td>郭富城</td> <td>男</td> <td> 51 </td> </tr> <tr> <td>黎明</td> <td>男</td> <td> 57 </td> </tr> </table> </body> </html>文字与单元格边框的距离，相当于单元格的长和宽
⑷cellspacing：单元格间距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格属性</title> </head> <body> <!-- 这些属性要写到表格标签table 里面去 --> <table align="center" border="1" cellpadding="30" cellspacing="0"> <tr> <th>姓名</th> <th>性别</th> <th> 年龄 </th> </tr> <tr> <td>刘德华</td> <td>男</td> <td> 56 </td> </tr> <tr> <td>张学友</td> <td>男</td> <td> 58 </td> </tr> <tr> <td>郭富城</td> <td>男</td> <td> 51 </td> </tr> <tr> <td>黎明</td> <td>男</td> <td> 57 </td> </tr> </table> </body> </html>单元格与单元格之间的距离
cellspacing=“0”
cellspacing=“40”
⑸.width或height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格属性</title> </head> <body> <!-- 这些属性要写到表格标签table 里面去 --> <table align="center" border="1" cellpadding="30" cellspacing="40" width="500" height="500"> <tr> <th>姓名</th> <th>性别</th> <th> 年龄 </th> </tr> <tr> <td>刘德华</td> <td>男</td> <td> 56 </td> </tr> <tr> <td>张学友</td> <td>男</td> <td> 58 </td> </tr> <tr> <td>郭富城</td> <td>男</td> <td> 51 </td> </tr> <tr> <td>黎明</td> <td>男</td> <td> 57 </td> </tr> </table> </body> </html>是表格的长和宽，不是单元格
二、表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中,分别用: 标签 表格的头部区域､标签 表格的主体区域 . 这样可以更好的分清表 格结构｡
。。。。目前看作用不明显，就是写代码分割用的
- :用于定义表格的头部｡内部必须拥有
标签｡ 一般是位于第一行｡ - :用于定义表格的主体,主要用于放数据本体 ｡
以上标签都是放在
标签中｡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>今日小说排行榜</title> </head> <body> <table align="center" width="500" height="249" border="1" cellspacing="0"> <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="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td><img src="up.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> </tbody> </table> </body> </html>运行结果：
三、 合并单元格
特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.
合并单元格方式
目标单元格
合并单元格的步骤
1.合并单元格方式:
跨行合并 :rowspan=“合并单元格的个数”，目标单元格为最上侧单元格。
跨列合并 :colspan=“合并单元格的个数”，目标单元格为最左侧单元格。
跨行合并： Row Span，“rowspan” 是 “Row Span” 的缩写。“Row” 意为行，“Span” 有跨度、跨越的意思，合起来表示跨越行，即跨行合并。
跨列合并 ：Column Span，“colspan” 是 “Column Span” 的缩写。“Column” 表示列 ，“Span” 同样是跨度、跨越的意思，整体意思是跨越列，即跨列合并。
2.目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格, 写合并代码
跨列:最左侧单元格为目标单元格, 写合并代码
3.合并单元格三步曲:
先确定是跨行还是跨列合并｡
找到目标单元格. 写上合并方式 = 合并的单元格数量｡比如:
｡ 删除多余的单元格｡
要求：合成下面这样子
一开始：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>合并单元格</title> </head> <body> <table width="500" height="249" border="1" cellspacing="0"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>运行结果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>合并单元格</title> </head> <body> <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>运行结果：
