table标签

table的基本样式
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标签

table标签

table的基本样式:

table表格的美化:

table表格行合并和列合并

最新文章

热门文章