`

帅气的table表格

 
阅读更多

.tb_02{
	width: 950px;
	border-collapse: collapse
}

.tb_02 td.w01 {
	padding: 0;
	text-align: center;
	width: 113px;
}
.tb_02 td.w03 {
width: 141px;
}
.tb_02 td.w04 {
width: 141px;
}
.tb_02 td.w02 {
width: 141px;
}
.tb_02 td.w05 {
width: 141px;
}
.tb_02 td.w06 {
width: 216px;
}
.tb_02 td{
	border: solid 1px #E6E6E6;
	height: 30px;
	text-align: center;
	color: #333;
	width: 188px;
	text-align: left;
	padding-left: 10px;
}
.tb_02 th {
	border: solid 1px #E6E6E6;
	background: url(http://www.sinaimg.cn/ty/deco/2012/0725/2012oly/images/medal/images/london_zxh_0706_02.png) repeat-x 0 -250px;
	height: 35px;
	line-height: 35px;
	padding: 0 20px 0 10px;
	font-size: 14px;
	color: #D1008B;
	text-align: left;
	font-weight: 100;
}
.tb_02 tr.bg td {
	color: #007CCC;
	font-weight: bold;
	background: #F8F8F8;
}
 

 

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb_02">
	<tbody>
		<tr>
            <th colspan="6" class="w01" scope="col">2012-08-03</th>
           </tr>
          <tr class="bg">
            <td scope="col" class="w01">AA</td>
            <td scope="col" class="w03">BB</td>
            <td scope="col" class="w04">CC</td>
            <td scope="col" class="w02">DD</td>          
            <td scope="col" class="w05">EE</td>
            <td scope="col" class="w06">FF</td>
          </tr>
                    <tr>
            <td class="w01"><span class="icon bronze">aa</span></td>
            <td class="w03">dd</td>
            <td class="w04">dd</td>
            <td class="w02">
            dd
            </td>
            <td class="w05"></td>
            <td class="w06"></td>
          </tr>
                    <tr>
            <td class="w01"><span class="icon gold">金牌</span></td>
            <td class="w03">蹦床</td>
            <td class="w04">男子</td>
            <td class="w02">
            董栋
            </td>
            <td class="w05">62.990</td>
            <td class="w06"></td>
          </tr>
                    <tr>
            <td class="w01"><span class="icon bronze">铜牌</span></td>
            <td class="w03">柔道</td>
            <td class="w04">女子+78kg</td>
            <td class="w02">
            佟文
            </td>
            <td class="w05"></td>
            <td class="w06"></td>
          </tr>
	</tbody>
</table>
  • 大小: 40.6 KB
分享到:
评论

相关推荐

    table表格的常用功

    table表格的常用功能 - JQuerytable表格的常用功能 - JQuerytable表格的常用功能 - JQuerytable表格的常用功能 - JQuerytable表格的常用功能 - JQuery

    uni-app table表格

    在uni-app框架中,`table`组件是一种用于展示数据的常用元素,尤其在处理列表或者表格数据时。uni-app是一个跨平台的前端开发框架,它允许开发者使用Vue.js语法编写代码,一次编写,多端运行,包括iOS、Android、H5...

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...

    HTML table表格编辑器

    "HTML Table表格编辑器"是一款工具,旨在提供一种便捷的方式,帮助用户在网页上创建、编辑和管理HTML表格。这款编辑器提供了诸如上下移动行、单元格内数据编辑等功能,大大提升了在网页中操作表格的效率。 在HTML中...

    微信小程序实现的绘制table表格功能示例

    本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: ...

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...

    vxe-table vue table 表格组件功能

    vxe-table是Vue.js中一款功能强大的表格组件,它为用户提供了丰富的表格操作功能,可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性,包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...

    js实现漂亮的table表格

    提供的"JS实现漂亮的表格table特效代码"可能包含JavaScript函数和CSS样式,用于实现上述功能。通常,这将包括对HTML表格元素的操作,以及添加CSS类和JavaScript事件监听器以实现特定效果。 总之,通过结合...

    使用bootstrap写的关于table表格的显示和折叠效果

    使用bootstrap,配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后,显示+号,再次点击,伸展表格中的内容,并显示-号

    table表格按列合并相同数据行单元格代码

    在jsp、html页面中实现table表格按列合并相同数据行单元格代码,可实现功能为:在一个table表格中,合并指定列中所有相同数据相邻行单元格内容。

    table表格内容上下移动的三种实现方法

    在网页设计中,HTML表格(Table)是一种常用的数据展示方式,有时我们需要实现表格内容的上下移动功能,以满足用户交互需求或数据操作便利性。本篇文章将详细讲解三种实现HTML表格内容上下移动的方法。 方法一:...

    将bootstrap-table表格翻译为中文

    Bootstrap-table 是基于Bootstrap框架的扩展插件,它允许开发者在网页中创建功能丰富的表格,包括排序、过滤、分页、行编辑等。在这个场景中,我们主要关注的是如何将Bootstrap-table的默认英文界面翻译为中文。 ...

    js table 表格 复杂表格 多维展示 多维表格【idosoft原创】

    经过研究,发布我的复杂表格、多维展示的成果,如图: 下面是源码(copy and paste,run 看效果): 访问链接: http://www.idosoft.com.cn/javatech/11.html

    原生js table表格自动排序效果

    在JavaScript的世界里,实现表格(table)数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery...

    【ASP.NET编程知识】ASP.NET Table 表格控件的使用方法.docx

    本文将详细介绍 ASP.NET Table 表格控件的使用方法,包括 Table 对象的属性、TableRow 对象的属性、TableCell 对象的属性,以及如何使用 Table 控件生成表格。 一、Table 对象的属性 Table 对象是 ASP.NET 中的一...

    Bootrap table表格示例

    1. **基础结构**:一个基本的Bootstrap表格由`&lt;table&gt;`标签开始,然后是`&lt;thead&gt;`(表头)、`&lt;tbody&gt;`(主体)和可选的`&lt;tfoot&gt;`(页脚)部分。每一行数据用`&lt;tr&gt;`标签表示,列数据则由`&lt;th&gt;`(表头单元格)或`&lt;td&gt;`...

    实现table表格可按行拖拽,按列排序,并可以保存排序后的结果

    "实现table表格可按行拖拽,按列排序,并可以保存排序后的结果"是一个常见的需求,尤其适用于数据展示和管理的场景。这里我们将详细探讨如何利用jQuery、jQuery.tablesorter和jQuery.tablednd_0_5这三个JavaScript库...

    boostrapTable表格树

    在"boostrapTable表格树"这个主题中,我们将深入探讨如何使用BootstrapTable实现表格树结构,以及它在实际项目中的应用。 BootstrapTable表格树是一种特殊的表格展示方式,它将数据以层次结构的形式展现,通常用于...

    javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...

Global site tag (gtag.js) - Google Analytics