分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

HTML细线表格的实现

发布时间:2023-09-06 01:53责任编辑:熊小新关键词:HTML

在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了。

<table border="1" cellspacing="0" bordercolor="#000000" width = "80%"> ???<tr> ???????<th>姓名</th> ???????<th>年龄</th> ???</tr> ???<tr> ???????<td>111</td> ???????<td>22</td> ???</tr>   <tr> ???????<td>222</td> ???????<td>21</td> ???</tr></table>

这段代码定义了border = 1pix的表格,但实际上表格的实际边框宽度为2pix, 这是因为表格边框由:表格外边框和单元格边框两部分构成。
那么如何定义一个细线表格(实际边宽为1pix) 呢?

1. 使用 cellspacing和背景色技术: 

<table border="0" cellspacing="1" bgcolor="#000000" width = "80%">   <tr bgcolor="#ffffff"> ???????<th>姓名</th> ???????<th>年龄</th> ???</tr> ???<tr bgcolor="#ffffff"> ???????<td>111</td> ???????<td>22</td> ???</tr>   <tr bgcolor="#ffffff"> ???????<td>222</td> ???????<td>21</td> ???</tr></table>

2.使用border-collapse属性:

<table border="1" cellspacing="0" bordercolor="#000000" width = "80%" style="border-collapse:collapse;"> ?   <tr> ???????<th>姓名</th> ???????<th>年龄</th> ???</tr> ???<tr> ???????<td>111</td> ???????<td>22</td> ???</tr>   <tr> ???????<td>222</td> ???????<td>21</td> ???</tr></table>

提醒: 对于通过方法1制作出来的细线表格,在打印时可能会出现表格边框打印不出来的问题。 而方法2就没有这个问题,推荐使用。

HTML细线表格的实现

原文地址:https://www.cnblogs.com/zzy-run-92/p/9017243.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved