重新认识表格

 表格一直是网页设计制作过程中一个重要的组成部分,在没学习CSS布局前,大多是用来布局的,但到目前位置发现居然还没真正地了解和完全掌握表格,不得不需要重新认识表格......

在现代网页设计制作中,表格主要的用途应该是用来存放多元二维数据。和表格相关的标签有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption,如何合理地应用这些标签呢?先从名词解释开始。

名词解释
table
显示二维数据

tr
表格中的一行

td
数据单元格

th
表头单元格,定义一行或者一列的表头信息,不能使用在布局表格里。

tbody
表格中的某一行或者多行编成组,要结合thead、tfoot一起使用

thead
将表格中的某一行或者多行编成组,要结合tbody、tfoot一起使用

tfoot
将表格中的某一行或者多行编成组,要结合tbody、thead一起使用

col
列,给某一列或者几列应用特定的属性,结合colgroup一起使用

colgroup
列的组合,结合col一起使用

caption
定义表格的标题,在表格开始的地方使用,仅一次

summary
说明表格的用途

例子:
程序代码<table summary="这是一个具有亲和力的表格的演示" id="demotab">
<caption>
访问 <a href="http://www.forest53.com">www.forest53.com</a> 浏览器统计
</caption>
<thead>
<tr>
<th>浏览器 / 月 </th>
<th>2005 / 11 </th>
<th>2006 / 04 </th>
<th>2006 / 05 </th>
</tr>
</thead>
<tfoot>
<tr>
<th>总计</th>
<td>1,646 ( 98.45% )</td>
<td>6,978 ( 99.48% ) </td>
<td>5,366 ( 99.56% ) </td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Internet Explorer</th>
<td>1,535 (91.81%)</td>
<td>5,905 (86.41%)</td>
<td>4,550 (84.42%)</td>
</tr>
<tr>
<th>Firefox</th>
<td>98 (5.86%)</td>
<td>746 (10.92%)</td>
<td>640 (11.87%)</td>
</tr>
<tr>
<th>Opera</th>
<td>13 (0.78%)</td>
<td>147 (2.15%)</td>
<td>176 (3.27%)</td>
</tr>
</tbody>
</table>

例子演示http://www.forest53.com/tutorials/table/

时间: 2024-09-08 03:14:17

重新认识表格的相关文章

excel表格如何重排窗口?

  excel表格如何重排窗口?开一个Excel工作文档是按照一个整体版面显示的,那么该怎么重排Excel文档的窗口呢,今天就一起来看看吧! 方法/步骤 打开我们需要重排窗口的Excel表格备用 在打开的Excel表格上方菜单栏寻找"视图"并单击 单击之后会出现一系列的菜单选项,在这里找到"重排窗口" 点击重排窗口之后在其下拉菜单中选择自己想要的窗口样式 点击选择"垂直铺平",即可完成对窗口的重新排列 排列前后对比图 以上就是excel表格如何重

学习网页制作技巧:给表格加滚动条

技巧|网页 其实这个东西没什么技术含量,就是给大家提供一个给表格加滚动条的思路. 运行代码框 <html><head><title>My table</title><style>.table0 {height:90%;}.table0 caption{width:100%;height:26px;line-height:26px;font-size:20px;font-color:black;font-weight:900;letter-spac

wps表格如何使用透视表功能

  wps表格使用透视表功能的方法 进入wps2016之后,找到文件所在的位置,打开需要处理的文件,进入Excel主界面之后,点击插入按钮. 点击插入过后,点击一下最左边的数据透视表. 进入新界面之后,我们可以点击一下途中的小图标,缩小该框架. 再点击鼠标左键,拖拽我们想要设定的区域.这里我们不仅仅要处理数字,内容也要圈上. 圈上之后,在输入框里也会显示出来相应的表格位置. 再回到刚才的界面,点击最下方的确定按钮. 这时候,右侧的数据透视表字段内容,将所有你想要计算的内容前面勾上对号. 如果我们

JS表格组件神器bootstrap table详解(基础版)_javascript技巧

一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

js-怎么实现表格的表头固定 ,表格不要滚动条

问题描述 怎么实现表格的表头固定 ,表格不要滚动条 表格显示10行 或更多的数据 ,下拉页面的时候看不见表头 ,怎么能让表头像固定到底部的导航一样 ,随着页面的下拉移动. 解决方案 CSS表格固定表头示例CSS固定表格table表头页头 解决方案二: 你把你的代码发进来我们好给你修改啊 解决方案三: 使用固定定位吧,如果固定定位满足不了你的要求,就用js控制吧 解决方案四: 可以考虑使用div做表头,好操作定位!当然也可以考虑使用双表格对接,一表格做表头+二表格做表身放数据,这样表头也可以控制定

web前端-固定的导航把 表格悬浮的表头挡住。

问题描述 固定的导航把 表格悬浮的表头挡住. 下面的是表头的css图片说明 设置top:50px 没反应 .. 解决方案 position: fixed是不占位的,也就是说你的导航下面其实是没有高度的,需要在表格前面加导航的高度的div来占位. 解决方案二: 设置表头z-index为99999试试,应该是z-index太低了 解决方案三: 解决方案四: 在悬浮导航后面加个 相关文章 web前端-固定的导航把 表格悬浮的表头挡住. js-怎么实现表格的表头固定 ,表格不要滚动条 前端-怎么让tab

java-jquery解析xml怎样把结果存到list或者hashmap最后生成excel表格

问题描述 jquery解析xml怎样把结果存到list或者hashmap最后生成excel表格 $.ajax({ type:""GET"" dataType:""XML"" timeout: 1000 //设定超时 cache: false //禁用缓存 url:""${pageContext.request.contextPath}/xml/from.xml"" success:fun

WPS表格添加文字说明的技巧

  在使用WPS表格时,我们常常会为了让表格看起来更加美观或者想要在图形中加上文字注释,该怎么办呢?所以下面小编就为大家介绍下WPS表格中怎样加上文字说明,大家就一起跟随小编学习起来吧. 操作步骤 1.打开WPS表格,点击菜单栏--插入--图形. 插入图形 2.选择一款你喜欢的形状,点击它. 形状选择 3.鼠标左键按住不放,拖动,画出图形. 4.右键点击图形,选择添加文字. 5.文字输入完成,看看效果. 以上就是WPS表格中添加自绘图形文字说明的方法.方法很简单,总体来说,就只要注意几个方面,就

Word2013设置表格边框教程

  1.打开的Word2013将Word文件打开,在打开的窗口中,选中整个表格,打开设计菜单选项卡,接着点击"边框"选择"边框和底纹"对话框. 2.在打开的边框和底纹对话窗口中的边框选项卡下,选择方框,在样式中选择实线.接着再点击"颜色"下拉按钮,在弹出的颜色选项框中选择一个自己需要的颜色. 3.接着在点击"宽度"下拉按钮,在染出宽度选项框中选择一个你需要的磅值的宽度.然后在点击"确定"按钮.

wps表格工作表怎么移动和复制

  在一个wps表格中我们可能会创建多个工作表,今天小编为大家介绍一下怎么移动和复制工作表,下面一起来看看具体的操作方法吧. 一.移动工作表 鼠标长按需要移动的工作表sheet,就会出现下图中的标示,这时只要进行左右拖动操作就可以方便的移动工作表了. 二.复制工作表 右击所需要复制的工作表sheet,在弹出菜单中选择"移动或复制工作表"选项. 在"移动或复制工作表"中,勾选"建立副本"选项,同时我们可以选择将该副本插入到哪个sheet前,如下图所