漂亮的表格

漂亮的表格

width="100%" height="300" src="https://c.runoob.com/iframe/3187" allowfullscreen="allowfullscreen">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漂亮HTML表格源码可以让网页看起来更加美观、清晰。以下是一些制作漂亮表格的源码: 1. 带有斑马纹的表格 ```html <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>27</td> </tr> <tr class="zebra"> <td>2</td> <td>李四</td> <td>32</td> </tr> <tr> <td>3</td> <td>王五</td> <td>25</td> </tr> <tr class="zebra"> <td>4</td> <td>赵六</td> <td>30</td> </tr> </table> ``` 通过给表格中奇偶行添加不同的背景色,可以让表格看起来更加舒适,代码中的 `class="zebra"` 就是用来实现这个效果的,只需要在CSS中定义好即可。 2. 带有边框和分隔线的表格 ```html <table border="1" cellpadding="0" cellspacing="0"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>27</td> </tr> <tr> <td>2</td> <td>李四</td> <td>32</td> </tr> <tr> <td>3</td> <td>王五</td> <td>25</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>30</td> </tr> </table> ``` 这个表格代码中,使用了 `border` 属性来定义表格的边框宽度,使用了 `cellpadding` 和 `cellspacing` 属性来定义单元格之间的间距,使表格看起来更加整洁。 3. 带有滑动条的表格 ```html <div style="overflow-x:auto;"> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>27</td> </tr> <tr> <td>2</td> <td>李四</td> <td>32</td> </tr> <tr> <td>3</td> <td>王五</td> <td>25</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>30</td> </tr> </table> </div> ``` 在这个代码中,通过在一个 `div` 元素中嵌套表格,然后在 `div` 的 CSS 样式中设置 `overflow-x:auto`,使得表格在超出 `div` 的宽度时,会自动显示水平滚动条,可以方便的查看完整的表格内容。 以上是一些常见的制作漂亮表格HTML源码,可以根据实际需求进行调整和修改,达到最佳视觉效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值