【HTML】HTML基础6.1（表格以及常见属性）

目录

表格介绍

表格标签

 表格标签的常见属性

案例

 知识点总结

---

表格介绍

在浏览器中，我们经常见到形如

这样的表格形式，一般来说，表格是为了让数据看起来更加清晰，增强数据的可读性

有的程序员也会用表格进行排版

表格标签

<table>
<!--表格标签-->

<tr> <td></td> </tr>
<!-- tr指的是行，td指的是每行的单元格 -->
 
</table>

 表格标签的常见属性

属性	属性值	描述
align	left、center、right	表格在浏览页面的位置
border	1 或者 无	默认为无，表示边框
cellpadding	像素值（就是具体数字）	单元格边缘与内容间的空白，默认为1
cellspacing	像素值（就是具体数字）	单元格边缘与内容间的空白，默认为2
width	宽度值	表格宽度

案例

一个略显粗糙的统计表

实现代码

<table align="center" border="5" cellpadding="5" with="500">
			<tr><th>获奖名称</th> <th>获奖方</th> <th>备注</th></tr>
			<tr><td><a href="https://www.baidu.com/s?wd=%E7%AC%AC30%E5%B1%8A%E7%BE%8E%E5%9B%BD%E6%BC%94%E5%91%98%E5%B7%A5%E4%BC%9A%E5%A5%96&tn=15007414_10_pg">第30届美国演员工会奖</a></td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td>2024年人民选择奖</td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td>第77届英国电影学院奖</td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=15007414_10_pg&wd=%E7%AC%AC51%E5%B1%8A%E7%BE%8E%E5%9B%BD%E5%8A%A8%E7%94%BB%E5%AE%89%E5%A6%AE%E5%A5%96&oq=%25E7%25AC%25AC51%25E5%25B1%258A%25E7%25BE%258E%25E5%259B%25BD%25E5%25AE%2589%25E5%25A6%25AE&rsv_pq=c05666680131a1c3&rsv_t=a9dao5Nvg%2FiM7UBeP2Sye1vRaRamaMWba3n54mpl27t1OdHWzr1Ws92ZPZ1n6dTb0P44LhA&rqlang=cn&rsv_dl=ts_0&rsv_enter=1&rsv_sug1=18&rsv_sug7=100&rsv_sug3=23&rsv_sug2=1&rsv_btype=t&prefixsug=%25E7%25AC%25AC51%25E5%25B1%258A%25E7%25BE%258E%25E5%259B%25BD%25E5%258A%25A8%25E7%2594%25BB%25E5%25AE%2589%25E5%25A6%25AE&rsp=0&inputT=35571&rsv_sug4=36356">第51届美国动画安妮奖</a></td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td>第19届中美电影节、中美电视节</td> <td>银河护卫队 <td>获奖</td></td></tr>
		</table>

 知识点总结

该表格用到的知识点有

①标签属性：align（center使得它居中）

②单元格中可以插入多种类型的数据，比如链接

③边框属性border可以通过调节数字实现粗细大小的设置

④开头的一排加粗居中是因为运用到了th标签

<th></th>

把小标题放进去即可

今天的分享到这里就结束啦~~希望能帮到您！