表格的主要作用
1、表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。
2、表格不是用来布局页面的,而是用来展示数据的。
支出项目 | 单价(元) | 数目 | 金额(元) |
---|---|---|---|
垃圾箱 | 30 | 12 | 360 |
垃圾牌 | 100 | 12 | 1200 |
宣传单 | 0.08 | 400 | 32 |
宣传小册子 | 3 | 250 | 750 |
合计 | —— | —— | 2342 |
表格的具体用法
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
1、<table> </table>
是用于定义表格的标签。
2、<tr> </tr>
标签用于定义表格中的行,必须嵌套在 <table> </table>
标签中。
3、<td> </td>
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。
4、字母 td 指表格数据(table data),即数据单元格的内容。
5、快速生成表格的书写方式:table>tr*2>td*3 (两行三列)
表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
<th>
标签表示 HTML 表格的表头部分(table head 的缩写)
<table>
<tr>
<th>姓名</th>
</tr>
</table>
总结:表头单元格也是单元格,常用于表格第一行突出重要性,表头单元格里面的文字会加粗居中。
表格属性
表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置。
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或 “” | 规定表格单元是否拥有边框,默认为"",表示没有边框。 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
一个小案例
思路:
先制作表格的结构
1、第一行里面是 th
表头单元格
2、第二行开始里面是 td
普通单元格单元格里面可以放任何元素,文字链接图片等都可以
后书写表格属性
1、用到宽度高度边框cellpadding
和 cellspacing
2、表格浏览器中对齐 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 align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名<