table进阶

最新推荐文章于 2024-08-21 14:48:47 发布

xdajian

最新推荐文章于 2024-08-21 14:48:47 发布

阅读量117

点赞数

分类专栏： CSS Javascript Web

本文链接：https://blog.csdn.net/xdajian/article/details/84055233

版权

Javascript 同时被 3 个专栏收录

55 篇文章 0 订阅

订阅专栏

Web

44 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 0 订阅

订阅专栏

<html>	
<head>
<title>DEMO</title>
<script src="JSLogger.js" debug="true" defer="defer"></script>

</head>
<body>


<table border="1" style="width:600px;table-layout:faixed;" frame="hsides" rules="groups">
     <caption>table练习</caption>
     <colgroup span="1" width="100"></colgroup><!--设置列分组：跨1列 并且每个td的宽度为100px，采用fixed-->
     <colgroup span="3" width="200"></colgroup><!--设置列分组：跨3列 并且每个td的宽度为100px，采用fixed-->
<thead>
     <tr>
          <td>信息类型</td>
          <td>表头2</td>
          <td>表头3</td>
          <td>表头4</td>
     </tr>
</thead>
<tfoot><!-- tfoot最好放在tbody前面，这样浏览器就能提前渲染表尾，可以加快表格的显示速度。-->
     <tr>
          <td>家庭地址</td>
          <td>北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市</td>
          <td>cell 4-3</td>
          <td>cell 4-4</td>
     </tr>
</tfoot>
<tbody>
     <tr>
          <td>中文名</td>
          <td>cell 2-2</td>
          <td>cell 2-3</td>
          <td>cell 2-4</td>
     </tr>
     <tr>
          <td>英文名</td>
          <td>cell 3-2</td>
          <td>cell 3-3</td>
          <td>cell 3-4</td>
     </tr>
	 <tr>
          <td>小名</td>
          <td>cell 3-2</td>
          <td>cell 3-3</td>
          <td>cell 3-4</td>
     </tr>
</tbody>
</table>

</body>

/* frame属性控制着表格最外围的四条边框的可见性
 void - 默认值。表示不显示表格最外围的边框。
 box - 同时显示四条边框。
 border - 同时显示四条边框。
 above - 只显示顶部边框。
 below - 只显示底部边框。
 lhs - 只显示左侧边框。
 rhs - 只显示右侧边框。
 hsides - 只显示水平方向的两条边框。
 vsides - 只显示垂直方面的两条边框。


rules 则控制着表格内部边框的可见性。
none - 默认值。无边框。
 groups - 为行组或列组加边框。
 rows - 为行加边框。
 cols - 为列加边框。
 all - 为所有行列（单元格）加边框

css:table-layout:fixed  表格的td将根据设置的width严格设置宽度。默认auto是根据内容。设置成fixed会加快table显示速度。
fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；

Talbe模型：
<table border="0/1"  frame="hsides/vsides/below" rules="groups/rows/cols/all" style="table-layout:fixed/auto;">
	<caption>用于写表格标题</caption>
	<colgroup span="" width=""></colgroup>	--设置列分组
	<thead>用于写表头</thead>
	<tboot>用于写表尾</tboot>
	<tbody>内容1</tobdy>
	<tbody>内容2</tobdy>
</table>

*/