HTML表格边框的设置小技巧-表格
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。
一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:
ID | NAME | GENDER |
1001 | mike | male |
可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,大家看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:
ID | NAME | GENDER |
1001 | mike | male |
但是,好像宽度还是没有我们想象的那样:只有一个像素的宽,其实,上图大家看到的其实是两个像素的宽,为什么呢,这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可,
即<table border="1px" cellspacing="0px" style="border-collapse:collapse">
ID | NAME | GENDER |
1001 | mike | male |
再给表格加个颜色,<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
ID | NAME | GENDER |
1001 | mike | male |
如下面所示
<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
<tr bgcolor="#ADCCF5" align="center">
<td width="5%" height="30">编号</td>
<td width="50%" height="30">标题</td>
</tr>
<tr>
<td width="5%" height="30"></td>
<td width="50%" height="30"></td>
</tr>
</table>
其中tr是行,td是列。
HTML表格边框的设置小技巧-表格的更多相关文章
- HTML表格边框的设置小技巧
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...
- (转)HTML表格边框的设置小技巧
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...
- css学习の第六弹—样式设置小技巧
一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...
- html 表格边框的设置
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- Xshell远程连接的具体操作和Xshell多会话设置小技巧
前几天给大家分享了Xshell的安装教程,今天给大家分享如何在Xshell中进行远程连接,并且分享一下如何设置一条命令可以发送多个终端,这里以Xshell6为例进行说明,具体的教程如下. 1.依次点击 ...
- 超 Nice 的表格响应式布局小技巧
今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...
- 从零开始学习html(十五)css样式设置小技巧——下
六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...
- CSS设置小技巧
水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...
- CSS样式设置小技巧
1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...
随机推荐
- Food on the Plane
Food on the Plane time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- DrawerLayout和ActionBarDrawerToggle
说明:DrawerLayout的作用就是左侧滑出.右侧滑出菜单.需要和ActionBarDrawerToggle来配合使用.如果对ActionBar不理解,请先熟悉ActionBar. 1.首先配置D ...
- CDockablePane使用总结
基于 http://blog.csdn.net/kikaylee/article/details/8936953 CDockablePane的基本布局和用法 新建一个SDI工程,在CMainFrame ...
- C语言版的16进制与字符串互转函数
http://www.cnblogs.com/nio-nio/p/3309367.html /* // C prototype : void StrToHex(BYTE *pbDest, BYTE * ...
- AutoTile 自动拼接(四) 学习与实践
今天主要来说下,数据绑定. 之前第一章,我说到 把 资源图 画成格子,你们应该还有印象吧. 那么,当我 知道 格子数据,能否拿到 资源对应的图片呢? 大家先复习一下 第一章,发现很多格子数据 是相同的 ...
- jQuery 图片随滚动条滚动加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HDU 1532 Drainage Ditches (最大网络流)
Drainage Ditches Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) To ...
- java 集合大家族
在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的ArrayList. ...
- UVALive 6887 Book Club
最大流,有向环覆盖问题. #include<cstdio> #include<cstring> #include<string> #include<cmath ...
- Windows API 之 FineFirstFile、FindNextFile
参考:https://msdn.microsoft.com/en-us/library/aa364418%28VS.85%29.aspx FindFirstFile Searches a direct ...