表格细边框制作方法

最新推荐文章于 2021-09-14 16:58:42 发布
原创 最新推荐文章于 2021-09-14 16:58:42 发布 · 967 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #border #xhtml #html #文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div>
    普通Table：
<table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0" style="width: 628px">
    <tr>
        <td style="width: 518px">
            细</td>
        <td style="width: 565px">
            表</td>
    </tr>
    <tr>
        <td style="width: 518px">
            线</td>
        <td style="width: 565px">
            格</td>
    </tr>
    <tr>
        <td style="width: 518px">
            123456
        </td>
        <td style="width: 565px">
             123456
        </td>
    </tr>
</table>
细边框表格1：
<table border="1" bordercolor="#000000" style="border-collapse: collapse" cellpadding="0" cellspacing="0" >
    <tr>
        <td style="width: 298px">
            细</td>
        <td style="width: 331px">
            表</td>
    </tr>
    <tr>
        <td style="width: 298px">
            线</td>
        <td style="width: 331px">
            格</td>
    </tr>
    <tr>
        <td style="width: 298px">
            123456
        </td>
        <td style="width: 331px">
             123456
        </td>
    </tr>
</table>
细边框表格2：
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
    <tr bgcolor="#FFFFFF">
        <td style="width: 298px">
            细</td>
        <td style="width: 336px">
            表</td>
    </tr>
    <tr bgcolor="#FFFFFF">
        <td style="width: 298px">
            线</td>
        <td style="width: 336px">
            格&nbsp;</td>
    </tr>
    <tr bgcolor="#FFFFFF">
        <td style="width: 298px">
            123456
        </td>
        <td style="width: 336px">
             123456
        </td>
    </tr>
</table>
细边框表格3：
<table cellspacing="0" cellpadding="0" style="width: 638px">
<tr align="center">
<td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove; width: 276px;">细</td>
<td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove; width: 306px;">表</td>
</tr>
<tr align="center">
<td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove; width: 276px;">线</td>
<td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove; width: 306px;">格</td>
</tr>
</table>
    </div>
</body>
</html>
 

just学习
关注
CSS实现表格细边框的三种方式
SunshineCoder的博客
12-17 1万+
说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。 由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下： 细边框表格的实现方式 /*可以应用于所有浏览器,但是需要设置table的标签属性:border="
CSS实现表格细边框的两种方法
12-13
在网页制作中，细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法，均通过XHTML验证。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ut
table 表格细边框
卡尔，小嫩肉
03-25 147
[size=large] 1 2 3 4 ============================================================= border=1 cellpadding="0" cellspacing="0" bordercolor="#00...
表格细线边框
weixin_51061595的博客
09-14 199
效果图 HTML部分 <body> <table cellspacing="0" align="center"> <thead> <tr> <th>交易日期</th> <th>市场类别</th> <th>本日融资余额(元)</th> <th>本日融资买入额(元)</th>
html细边框的文本框,CSS实现表格细边框的两种方法
weixin_39636411的博客
06-03 444
在网页制作中，细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法，均通过XHTML验证。复制代码代码如下:表格细边框的两种CSS实现方法/* 利用表格样式 border-collapse: collapse 实现细边框 */.tab1{width: 300px;height: 200px;border: 1px solid #ccc;border-collapse: collap...
制作细表格细边框教程
烂锅烂铁
05-11 211
  一、表格中单元格之间分隔线的隐藏方法 第 一 行 第 二 行 第 三 行 这个表格去掉了单元格之间的纵向分隔线 第 第 第 一 二 三 列 列 列 这个表格去...
Dreamweaver中制作细边的表格的技巧
09-24
如果你需要一个只有外边框是细线，而内部单元格之间没有分隔线的表格，可以采用嵌套表格的方法： 1. **插入外层表格**：在设计视图中，插入一个1行1列的表格，设置其边距、间距、边框和背景颜色，如上所述，但这次...
Dreamweaver制作细边框表格
01-23
### Dreamweaver 制作细边框表格 在网页设计中，使用表格是一种常见的布局方式。Dreamweaver 是一款强大的网页设计工具，可以帮助设计师轻松创建各种样式的表格。本篇文章将详细介绍如何使用Dreamweaver来制作具有...
css 细线表格 css制作table细线表格常用属性
09-25
这个属性用于合并表格的内外边框，其目的是消除默认情况下表格边框之间的间隙，使得边框看起来更细。当`border-collapse`设置为`collapse`时，相邻的边框会合并成一个单一的边框，从而达到细线的效果。例如，在给...
html制作细线表格的简单实例
09-28
HTML制作细线表格的实例中主要涉及的知识点包括HTML表格的属性设置、CSS样式应用、以及通过CSS控制表格边框的视觉效果。以下是详细的解释： 1. table标签属性设置：在HTML中，创建表格通常使用table标签，并且可以...
html 表格细边框处理
XXup
04-18 814
样式表如下：table#border{border-top:#000 1px solid;border-left:#000 1px solid;}table#border td{border-bottom:#000 1px solid;border-right:#000 1px solid;} 然后再要加边框的html文件中加上
如何让表格的边框变细的三种方法
01-23
众所周知，表格自带的边框很粗很难看，但是如何让表格边框变细，敬请查看源码，内附三种方法哦！
制作表格步骤
02-16
css制作表格，flash演示，步骤详细，初学者可以看着怎么去编写表格
细边框表格的实现方法
gaochc的专栏
06-11 381
<br />下面的这种方法及其简单，html代码也减少了很多，结构更加的清晰。<br /><style type="text/css"><br /><!--<br />table{<br />border-collapse:collapse;<br />}<br />td{<br />background:#ffc;<br />border:solid 1px #f90;<br />height:22px;<br />}<br />--><br /></style><br />html代码：<br /><t
三种细边框表格的实现方法比较（转）
a15116818991的博客
07-21 211
背景设置式－细边框表格 代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>背景设置式－细边框表格</title> ...
给HTML中的table边框设置细边框样式
08-08 1286
给HTML中的table边框设置细边框样式 博客分类：  HTML    给table设置细边框: Html代码   .table_border{       border: solid 1px #B4B4B4;       border-collapse: collapse;     --折叠样式.   }   .table_borde
表格细线边框的做法
johncools的博客
06-22 3340
方法1：把表格的cellspacing设置为1，cellpadding和border均为0，分别填充表格的背景色和单元格的背景色。举例如下： ＜tablewidth="550"border="0"cellspacing="1"cellpadding="0"bgcolor="#666666"＞ ＜trbgcolor="#FFFFFF"＞ ＜td＞＜/td＞ ＜/tr＞ ＜trbg
html中表格细边框的四种实现及其比较
热门推荐
好好学习，好好工作
07-05 1万+
<br />第一种<br />使用css<br /><!---=========华丽的分隔线。。===================--><br /> <style><br />.box {<br /> border-top-width: 1px;<br /> border-right-width: 0px;<br /> border-bottom-width: 0px;<br /> border-left-width: 1px;<br /> border-top-style: solid;<br /> 
三种细边框表格的实现方法比较
lichengyezi的博客
08-20 249
1.背景设置式－细边框表格 &lt;html&gt; &lt;head&gt; &lt;title&gt;背景设置式－细边框表格&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="200" border="0" cellpadding="2" cellspaci
实现表格边框细线的三大技巧
这种方法允许更灵活地控制表格中各个部分的边框宽度，例如，可以只让表头或特定单元格具有细边框，而其他行或列保持默认边框宽度。 ### 总结 以上三种方法各有优缺点，但在实际应用中可以根据具体需求和场景选择最...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值