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的类型 类 功能 构造器参数 如何使用