HTML2 表格细边框

最新推荐文章于 2022-07-12 19:33:28 发布
最新推荐文章于 2022-07-12 19:33:28 发布
阅读量727 收藏
点赞数
分类专栏： HTML 文章标签： html class table button border input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxj_snow/article/details/5803416
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript01</title>
<style type="text/css">
.wapper{
 width:600px; 
}
.wapper table, .wapper table td{
 border-collapse:collapse;
 border:1px solid #CECFCE;
 font-size:12px;
 background:#F7F7F7;
 line-height:18px;
 padding:5px;
}
.wapper table td.rh{
 padding:5px;
 text-align:right;
 vertical-align:middle; 
}
.wapper table td.lf{
 padding:5px;
 text-align:left;
 vertical-align:middle;
}
.wapper table td.bgcolor1{
 background:#C6E3FE
}
.wapper input{
border:1px solid;
border-color:#9C9A9C;
}
.wapper input.loginName{
 width:150px;
}
.wapper input.pass{
 width:135px;
}
.wapper input.emailStyle{
 width:250px;
}
.wapper input.button{
 width:80px;
 height:20px; 
}
</style>
</head>

<body>
<div class="wapper">
<form>
<table style="border-collapse:collapse" width="100%"  height="250"  bordercolor="#CECFCE" cellpadding="0" cellspacing="0">
<tr>
 <td colspan="2" class="bgcolor1" class="lf"><b>必填信息</b></td>
</tr>
<tr>
 <td align="right" class="rh">登录名</td>
 <td class="lf"><input class="loginName" type="text" id="loginName" /><label>&nbsp;(只能用英文、数字和下划线)</label></td>
</tr>
<tr>
 <td align="right" class="rh">密码</td>
 <td class="lf"><input class="pass" type="password" id="pwd"/><label>&nbsp;(密码必须大于5位，区分大小写)</label></td>
</tr>
<tr>
 <td align="right" class="rh">确认密码</td>
 <td class="lf"><input class="pass" type="password" id="fpwd"/></td>
</tr>
<tr>
 <td align="right" class="rh">邮件地址</td>
 <td class="lf"><input class="emailStyle" type="text" id="email"/></td>
</tr>
<tr>
 <td align="right" class="rh">确认邮件地址</td>
 <td class="lf"><input class="emailStyle" type="text" id="femail"/></td>
</tr>
<tr>
 <td colspan="2" align="center">
 <input class="button" type="submit" value="提交"/>
 <input class="button" type="reset" value="重填"/>
 </td>
</tr>
</table>
</form>
</div>
</body>
</html>

wxj_snow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java 后台 生成的表格通过HtmlImageGenerator(Html2Image) 生成图片
04-03
html2image-0.9.zip 包含 html2image-0.9.jar，html2image-0.9-javadoc.jar，html2image-0.9-sources.jar
css控制表格细边框样式
09-25
当我们谈论“css控制表格细边框样式”时，这意味着我们需要使用CSS来调整HTML表格的边框宽度，使其看起来更精致，通常表现为细边框，提升视觉效果。下面将详细讲解如何实现这一目标。 首先，我们需要了解HTML表格的...
html 细线表格
qq_52253798的博客
11-03 295
推荐用法： 代码如下： <style> table{ border-collapse: collapse; } tr{ height: 20px; border: 1px solid black; } td{ width: 200px ; height: 40px ; border: 1px solid black; } </style> <table cellpadding="0";cellspaci
html 表格边线设置
weixin_30730151的博客
10-31 392
<table rules="all" style="margin-left: auto; margin-right: auto; margin-top: 50px; border: 1px solid black"> <tr v-for="row in rows"> <td>{{row.ti...
html表格边线显示
chenwei9120的专栏
05-07 2370
http://www.w3.org/1999/xhtml">                   cellspacing="0" align="center">      12341234      12341234    
HTML table 细表格实现的两种方式
qq_39240684的博客
01-08 429
HTML table 细表格实现的两种方式第一种第二种实现效果 第一种 <%-- Created by IntelliJ IDEA. User: Think Date: 2020-01-08 Time: 12:51 To change this template use File | Settings | File Templates. --%> <%@ p...
CSS实现表格细边框的两种方法
12-13
本文将详细讲解两种常见的CSS方法，用于创建美观的表格细边框，这两种方法都通过了XHTML验证。 第一种方法是利用`border-collapse: collapse`属性。在HTML中，表格默认情况下会有一定的间距，导致边框之间有空隙。`...
用CSS设置表格Table的细边框的比较好用的方法
09-25
本文将详细介绍如何利用CSS有效地设置表格的细边框。 首先，我们来看第一种方法。这种方法比较“另类”，但也能达到目的。它通过设置 `border=0` 和 `cellspacing=1`，然后为表格设置背景色，使其与细边框颜色相同...
有关HTML表格边框的设置小技巧
09-28
在本文中，我们将深入探讨如何有效地控制和定制HTML表格的边框，以便获得理想的效果。 首先，最基础的表格边框设置是通过`<table>`标签的`border`属性来实现的。例如，`<table border="1">`会为表格添加一个1像素宽...
HTML table表格边框的控制详细说明
01-19
只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> ...表格边框的隐藏</title> <meta http-equiv=”Content-Type” content=”text/html; charset=u
html 表格细边框处理
XXup
04-18 745
样式表如下：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文件中加上
Html-浅谈如何正确给table加边框
qq_45991812的博客
06-09 8780
Html-浅谈如何正确给table加边框
Html中的表格，边框基础知识
Liu9714的博客
07-12 6534
表格它是用<table>去定义的，然后用<tr>定义行，用<th>定义表头 borderCollape:callapse;的属性值是边框合并，边框合并需要设置给table 边框不能设置给table，只能设置给需要的单元格表格的跨行是rowspan属性，它的属性值决定了跨几行，conspan是跨列，它的属性值决定了跨几列 collspacng是单元格和单元格之间的间距，需要加给他的父元素table，collpadding是内容与单元格的边框的距离 表格的特点是在同一
Html：正确给table表格加边框
热门推荐
彭世瑜的博客
04-17 4万+
【代码】Html：正确给table表格加边框。
html表格边框
星尘
09-28 4283
内边框： 隐藏横向分割线 rules = cols 隐藏竖向分割线 rules = rows 隐藏所有分割线 rules = none 外边框： 只显示上边框 frame = above 只显示下边框 frame = below 只显示左右边框 frame = vsids 只显示山下边框 frame = hsides 只显示左边框 frame = lhs 只显示右边框 frame = rhs ...
HTML控制表格边线显示。
sun0322
01-28 1万+
前言： 如果我们想让一个表格有黑色的边线，很容易实现。 使用以下代码即可。 table { border-collapse:collapse; } table, td, th { border:1px solid black; } 但是这样的表格我们是无法任意空中边线的显示的。 比如我们想让表格的右上角不显示。 这时，我们就要一点一点画出表格的边线
html: 表格边框的设置
陶匠一路跑
11-14 4363
如果直接将table中的border置1，则表格的边框大于1。可以写两个table，一个作为背景，其背景颜色就是我们所有的边框颜色；另一个表格border="0" cellpadding="0" cellspacing="1"，可实现想要的结果：table border="0" cellspacing="0" cellpadding="0">  tr>    td bgcolor="#00
HTML表格
qq_39224439的博客
07-07 3058
表格表格的定义：&lt;table border="1px" cellspacing="0"&gt; -----------table表示定义表格，border属性表示设置表格的边框宽度为1px，cellspacing表示每个单元格与单元格之间的距离，0表示没有距离，如果不设置cellspacing属性则默认值为1。 &lt;tr&gt; ------------定义表格的一行 &lt;t...
Html-浅谈如何正确给table加边框（转）
无心人的终点
08-03 2万+
https://www.cnblogs.com/leona-d/p/6125896.html 一、 &lt;table border="1"&gt; 表格边框 如图：，也就是border=1，意思就是给表格的每一格，及边框加上1像素的边框   二、 &lt;table border="1" cellspacing="0"&gt; cellspacing单元格间距 如图：这时表格大小为：2...
html细边框的文本框,CSS实现表格细边框的两种方法
最新发布
06-01
对于HTML细边框的文本框，可以使用CSS中的border属性来设置边框的宽度、样式和颜色，同时可以使用padding属性来设置文本框边框与文本之间的间距。例如： ``` <input type="text" style="border: 1px solid #ccc; padding: 5px;"> ``` 对于CSS实现表格细边框的两种方法，可以分别使用border-collapse属性和border-spacing属性来实现。具体方法如下： 1. 使用border-collapse属性：该属性用于控制表格边框的合并方式，可以将相邻单元格的边框合并为一个单一边框，从而实现表格细边框的效果。例如： ``` table { border-collapse: collapse; } td, th { border: 1px solid #ccc; padding: 5px; } ``` 2. 使用border-spacing属性：该属性用于设置单元格之间的间距，可以通过减小间距来实现表格细边框的效果。例如： ``` table { border-spacing: 0; } td, th { border: 1px solid #ccc; padding: 5px; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值