细边框Table制作 页面居中

最新推荐文章于 2022-03-29 00:25:11 发布
最新推荐文章于 2022-03-29 00:25:11 发布
阅读量281 收藏
点赞数
分类专栏： .net开发 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/njm168/article/details/83675683
版权
[size=large]在页面布局时经常会使用到table，但如果使其border=1,会不好看；
如果使用border=0,而td的边框又不好控制，如何实现细边框呢？[/size]

步骤：
1、放一个div,内置table，利于控制样式（style="margin: 30px auto;" 页面居中）。
2、给table一个背景色，要稍深色并设cellpadding="1" cellspacing="1"（cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center"）。
3、最后设td的样式bgcolor="#FFFFFF"白色。
4、总结：背景色深，背景色浅，而table的cellpadding="1" cellspacing="1"所以就出现了一个细边。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 细边框Table制作 </TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </HEAD>

 <BODY>
  <!--正文-->
    <div id="AddNew">
        <fieldset>
            <legend>用户管理:</legend>
            <div class="role" style="margin: 30px auto;">
                <table cellpadding="1" cellspacing="1" bgcolor="#DCDCDC" border="0" align="center"
                    width="459">
                    <tr>
                        <th colspan="2" style="background-color:#7ABAFF;">
                            新用户注册
                        </th>
                    </tr>
                    <tr>

                        <td class="w80" bgcolor="#FFFFFF" style="text-align: right; height: 30px;">
                            用户名
                        </td>
                        <td bgcolor="#FFFFFF" align="center">
                            <input name="txtUserName" type="text" id="txtUserName" style="width:150px;" />
                        </td>
                    </tr>
                    <tr>

                        <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;">
                            密码
                        </td>
                        <td bgcolor="#FFFFFF" align="center">
                            <input name="txtPassword" type="password" id="txtPassword" style="width:150px;" />
                        </td>
                    </tr>
                    <tr>

                        <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;">
                            确认密码
                        </td>
                        <td bgcolor="#FFFFFF" align="center">
                            <input name="txtConfirmPassword" type="password" id="txtConfirmPassword" style="width:150px;" />
                        </td>
                    </tr>

                    <tr>
                        <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;">
                            邮箱
                        </td>
                        <td bgcolor="#FFFFFF" align="center">
                            <input name="txtEmail" type="text" id="txtEmail" style="width:150px;" />
                        </td>

                    </tr>
                    <tr>
                        <td bgcolor="#FFFFFF" style="text-align: right; height: 30px;">
                            角色
                        </td>
                        <td bgcolor="#FFFFFF" align="center">
                            <select name="ddlRole" id="ddlRole" style="width:155px;">
								<option value="-1">-请选择-</option>
								<option value="1">Admin</option>

								<option value="2">SuperAdmin</option>

							</select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="Button" align="center">
                            <img src="RegisterButton.gif"/>
                        </td>
                    </tr>
                </table>
            </div>
        </fieldset>
    </div>
    <!--正文 end-->

 </BODY>
</HTML>


效果图：
[img]http://dl.iteye.com/upload/attachment/283905/fc0fbb37-ddef-3a87-ad6f-ac54cf0ae83b.png[/img]
njm168
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
table居中显示_css各种居中方法总结
weixin_39537680的博客
12-06 1548
前言在使用css设置页面样式时会经常遇到需要居中的情况，下面我总结了一些css在不同条件下实现居中的方法。有一些方法具有一些hack的味道，大家看看就好。为了方便显示居中效果，给父元素和子元素都设置了边框和背景样式，由于效果都差不多，对于每一个方法我就不截图显示了，水平居中的大概实现是这样的1，水平居中+阻止子元素定宽+ margin .parent { ...
【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠
RToax
01-08 322
目录 初始表格 边距、居中、边框 单元格边距cellspacing 边距折叠（两个叠加不会变粗）border-collapse:collapse; 单元格边距border-spacing 初始表格 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht...
html中table标签及其它标签居中
MrYushiwen的博客
07-28 2897
1.style=" margin:auto" 使用margin外边距属性，让其上下左右自动均分剩余空间，就会使其标签居中显示 例如table标签： <table border="1" cellpadding="15px" cellspacing="0" style=" margin:auto"> 效果： 2.text-align: center text-align 属性规定元素中的文本的水平对齐方式，结合margin来使用，使其table居中，table文本内容居中 <table b
html中table表格里的内容如何居中
热门推荐
weixin_53867380的博客
03-29 4万+
1.table表格整个居中 <div style="text-align: center;"> <table border="1" style="margin: auto；" width='60%'> ...... </table> </div> 我们在table外围div中加入样式style="text-align: center;"，会发现table表格居中不生效，原因最后说。 所以我们在 <table b...
HTML_TABLE内外边框颜色设置及页面居中
11-14 9883
标签:   ---此处设置外边框颜色 房屋基本信息            房屋狀態 ---此处设置单元格边框颜色 $TYPE$ 房屋類別此处设置单元下边框颜色 $FWLB$ 所在地區 $XS$ style="border-collapse: collapse" bordercolor="#254389"----设置所有边框颜色 style= "bor
css 细线表格 css制作table细线表格常用属性
09-25
例如，在给表格（`table`）设置此属性后，原本可能有2px宽的边框（外1px，内1px）会被合并成1px。 其次，`border`属性是一个简写属性，用于设置元素的边框样式、颜色和宽度。在本例中，`border:solid #999;`表示...
jquery.table2excel.js 导出可居中
01-21
bootstraptable 可以直接导出的插件,导出内容自动居中处理 https://blog.csdn.net/qq_39087348/article/details/112970600
利用CSS生成精美细线Table表格无需复杂style代码
09-25
对于表头`<th>`，`.table th`选择器设置了字体大小、颜色、边框和背景，以及居中对齐等样式。而`.table td`选择器则定义了单元格的默认样式，包括边框、背景色、字体大小、颜色和内填充等。 为了实现隔行变色，可以...
WPF学习笔记-FlowDocument实现表格单元格垂直居中以及边框设置
最新发布
04-01
在网上搜索了不同的解决方案，包括手动计算高度，通过Margin属性来实现类似居中的问题，或者尝试在单元格中添加BlockUIContainerl来实现居中，但是实际由于TableCell自身没有居中，或者适应宽度，最终都以失败告终。
界面让table居中的办法
Cherry
05-01 1万+
以前老的办法是   用的是align属性，但是这个align如果你放在css中，就会发现毛用没有了。只能写在界面中。 table{ align:center; } 以上的方法虽然简单，但是align属性官方已经不推荐使用了，推荐使用 float:属性，但是这个属性有没有居中的值，这就蛋疼了。 还好有其他办法也是可以再css中实现，不过需要再加一层 用的是div di
CSS基础知识-四（边框样式、caption、表格居中、边框宽度和高度、id和class的区别、Div+CSS布局）
张新丁
05-31 4849
表格： 1、 边框样式： Border-collapse:collapse（合并）  / separate（默认，两个边框）;-----设置边框是否重叠 Border-spacing:20px;-----表格列之间的距离 如： table{          width:600px;          height:200px;          border:1pxsolid #
div入门之边框（border)，页面水平居中效果（margin)
u011333814的专栏
02-03 1万+
标记： 一行始终只有一个div标记 没有特征性，css更容易控制 border是复合属性： 1.border-width 2.border-style:none(默认值）无边框，hidden,dotted,dashed,solid,double,groove,ridge,inset,outset 3.border-color //style.css #first{
Table表格边框线、样式
BiangBaing的博客
12-01 3593
原文转自：https://www.cnblogs.com/zhengxu/articles/2354410.html HTML_TABLE内外边框颜色设置及页面居中 HTML_TABLE内外边框颜色设置及页面居中 时间: 2009.05.07 11:32:00 标签: <table width="100%" cellpadding="0" cellspacing="0" bgcolor="#a1a1a1" id="table2">---此处设置外边框颜色 <tr > <t.
Table控件及内容居中
u013719984的博客
04-16 2878
Table控件居中整个Table控件居中
如何实现table在网页中的居中显示
小白学堂
04-06 7807
table里的内容居中的话直接 用align=center valign=middle就可以了， 但是要把整个table也居中，就必须再建一个页面大小的table， 把目标table当成其中的内容来对待才行，代码如下： <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="...
CSS样式表进行table水平居中、垂直居中、自动填充
qq_39061832的博客
07-24 3万+
最近，在用CSS+DIV做一个静态网页，做完了才发现所有的页面在不同的机器上显示很是有问题，没有进行水平居中和垂直居中，并且宽屏下，两边留白太难看。可是要是修改所有的html页面，可是有700多个~~，还好当时做html页面时设计的样式表还不错，让我感觉到了样式表的方便和强大。 注：还得同时考虑Linux Firefox下的显示情况，因为我们是做Linux的公司啊，出去演示肯定用自己的lLi
html table设置边框
04-04
/* 文字居中 */ } th, td { border: 1px solid black; /* 设置表格边框 */ padding: 5px; /* 单元格内边距 */ } th { background-color: gray; /* 表头背景色 */ color: white; /* 表头文字颜色 */ } ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值