目录
表格介绍
表格标签
表格标签的常见属性
案例
知识点总结
表格介绍
在浏览器中,我们经常见到形如
这样的表格形式,一般来说,表格是为了让数据看起来更加清晰,增强数据的可读性
有的程序员也会用表格进行排版
表格标签
<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>
把小标题放进去即可
今天的分享到这里就结束啦~~希望能帮到您!