html table标签
table标签
table的基本样式:
https://blog.csdn.net/lilongsy/article/details/77606662
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
<!=-- width="95%":设置占屏幕的百分比 style="table-layout:fixed;":半角符连续字符会自动换行,注意设置了这个属性tr和td就不要轻易加height属性否则会无法生效 -->
<tr>
<td width="50px" nowrap>序号</td>
<td width="150px" nowrap>分类A</td>
<td width="150px" nowrap>分类B</td>
<td width="200px" nowrap>名称</td>
<td align="left" width="150px" style="word-wrap:break-word;">说明fdsaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<!-- style="word-rap:break-word;":如果td设置了宽度,半角符连续字符会自动换行,否则要在table加style="table-layout:fixed;" -->
<td width="100px" nowrap>操作</td>
</tr>
……
</table>
</table>
</body>
</html>
table表格的美化:
https://yq.aliyun.com/articles/573432
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<!-- font-size:12px; 字体设置为12px -->
<!-- tableLayout 属性用来显示表格单元格、行、列的算法规则。 fixed列宽由表格宽度和列宽度设定 automatic 默认,列宽度由单元格内容设定。 inherit 规定应该从父元素继承 table-layout 属性的值。-->
<!-- border-collapse: collapse; 为表格设置合并边框模型,设置后就就没有多重边框,可以达到excel的边框效果--> <style type="text/css">
body, table{font-size:12px;}
table{
table-layout:fixed;
empty-cells:show;
border-collapse:collapse;
margin:0 auto;
}
td{height:30px;}
h1, h2, h3{
font-size:12px;
margin:0;
padding:0;
}
.table{
border:1px solid #cad9ea;
color:#666;
}
.table th{
background-repeat:repeat-x;
height:30px;
}
.table td, .table th{
border:1px solid #cad9ea;
padding:0 1em 0;
}
.table tr.alter{
background-color:#f5fafe;
}
</style>
</head>
<body>
<table width="90%" class="table">
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr class="alter">
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
table表格行合并和列合并
- colspan是“column span(跨列)”的缩写。colspan属性用在td标签中,用来指定单元格横向跨越的列数:
- rowspan的作用是指定单元格纵向跨越的行数。
- 使用实例
<tr>
<th colspan="3" align="center">InputStream类型</th>
</tr>
<tr>
<th rowspan="2">类</th>
<th rowspan="2">功 能</th>
<th>构造器参数</th>InputStream的类型 类 功能 构造器参数 如何使用
html table标签的更多相关文章
- python处理html的table标签
转载:http://www.xuebuyuan.com/583071.html python处理html的table标签 2012年01月06日 ⁄ 综合 ⁄ 共 5279字 ⁄ 字号 小 中 大 ⁄ ...
- ol,ul,dl,table标签的基本语法
ol,ul,dl,table标签的基本语法 有序列表: 无序列表: 自定义列表: <ol> <ul> < ...
- HTML——表格table标签,tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- table标签
table标签使我们最常用的的标签,在使用table标签时我们要注意一些其属性,早期我们经常使用table标签对其进行页面布局但是现在我们基本不再使用,由此可见table标签也是非常强大的一个工具. ...
- dl标签和table标签
dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl> <dt>计算机</ ...
- PHP自学4——通过函数将数组数据输出到html的Table标签中(使用函数的例子)
这一节其实说实话并没有什么干货,不过为了防止PO主的懒癌的复发,还是坚持放一点东西,即使是内容和长度都令人发指.这一节通过一个函数来实现将数组中的内容输出html的Table标签当中显示. 函数文件— ...
- PHP自学3——在html的<table>标签中显示用户提交表单
为了更好地显示用户提交表单,本节将在上一节的基础上将读取的用户表单显示在html的<table>标签中,这一节将用到和数组有关的知识. 本节代码将从外部文件(.txt文件)中读取信息于指定 ...
- display:table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性
区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...
- <table>标签总结(colspan跨列 ,rowspan跨行)
table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...
随机推荐
- linux command ------ tar
-c: compress archives -x:decompress archives -t:check archives -z:whether it has the attribute of gz ...
- 2018acm-icpc西安邀请赛后记
第一次参加icpc的邀请赛,有一点小激动,深知大一弱队实力弱,赛前给队友的目标就是拿块铜,不打铁. 热身赛因为没有用过pc^2,codeblocks又用不习惯的原因,开始调工程调了很久,差一点拿到A题 ...
- ubuntu14.04上java jdk & mvn安装
这些常用工具的安装步骤还是自己记录下,以后再次用到时就会方便许多. 系统:ubuntu14.04 jdk安装. 1.从官网下载好jdk安装包 jdk-8u111-linux-x64.tar.gz 2. ...
- Ubuntu 16.04配置VNC进行远程桌面连接
1.安装 $sudo apt-get install xfce4 $sudo apt-get install vnc4server $sudo apt-get install xrdp 2.启动vnc ...
- Linux命令之mkdir
mkdir命令 用处:创建文件夹 用法:在终端中输入mkdir加上文件夹的名字 示例: (我想创建一个名字为shuyunquan的文件夹)
- springboot整合activiMQ
首先说明: 队列queue 的特点就是,许多人可以监听它,但是只有一个人能够收到消息. 主题topic 的特点就是,许多人监听它,都能收到消息. 需要安装activiMQ在自己的电脑上.启动方 ...
- canvas实现时钟
最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...
- android kotlin Gradle DSL method not found: '1.2.51()'错误,be using a version of the Android Gradle plug-in that does not contain the method (e.g. 'testCompile' was added in 1.1.0).
同步的时候遇到这个问题,从log上看是因为gradle的版本不包含kotlin 1.2.51这个method,具体原因我也不是很清楚,大概猜测是kotlin版本的问题,而最新的版本就是1.2.51,所 ...
- 20155332 2016-2017-2 《Java程序设计》第7周学习总结
20155332 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 了解Lambda语法 了解方法引用 了解Fucntional与Stream API 掌握Da ...
- apache - http
apahce 添加模块编译 httpd # so模块用来提供DSO支持的apache核心模块 # 如果编译中包含任何DSO模块,则mod_so会被自动包含进核心. # 如果希望核心能够装载DSO, ...