`
jlwu
  • 浏览: 688 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

HTML TABLE

阅读更多
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>


------------

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>
<!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>
分享到:
评论

相关推荐

    HTML Table 漂亮的CSS

    在网页设计中,HTML表格(Table)是一种常用的数据展示方式,而通过应用合适的CSS(Cascading Style Sheets)样式,我们可以让这些表格看起来更加美观、专业。本资源包"HTML Table 漂亮的CSS"提供了多种独立的CSS...

    将HtmlTable 导出为Execl文件,支持合并单元格、合并行,无需Office支持

    在IT行业中,将HTML表格(HtmlTable)导出为Excel文件是一项常见的需求,尤其是在数据分析、报表生成和数据共享等场景中。本项目提供了一个解决方案,它支持合并单元格和合并行,无需依赖Microsoft Office,这对于...

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

    html table 固定表头和列

    "html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头(thead)和第一列(或列组)始终保持可见。 一、HTML表格基础 在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`定义表格行,`&lt;th&gt;`定义表头...

    分享一个首行表头和最左列和最右列固定中间滚动的html table样式

    一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...

    html table 导出Excel,xml

    "html table 导出Excel,xml"这个主题就是关于如何实现这一功能的。这里我们将深入探讨这个过程,并提供相关的知识点。 首先,HTML表格是一种在网页上展示结构化数据的标准方式,它由`&lt;table&gt;`标签定义,包含`&lt;tr&gt;`...

    html Table 表头固定的实现

    在进行HTML页面设计时,表格(Table)是经常使用的组件之一。尤其是在需要展示数据集的场景中,表格因为其结构化的特性,可以清晰地显示数据。但有时候,我们会遇到一个问题,即当表格数据量较大时,随着页面向下...

    Scrollable HTML table

    "Scrollable HTML table" 是一个网页设计和前端开发的主题,它涉及到在HTML中创建可滚动的表格。这样的表格允许用户在数据量过大无法一次性完全展示时,通过滚动条查看所有内容。"Source JS and Example" 表示我们将...

    html table实现复杂表头的示例代码

    使用html做复杂的表格。复杂表格一般是用到td的两个属性:rowspan 、colspan属性值。 在html中&lt;td&gt; 标签定义 HTML 表格中的标准单元格。  (1)rowspan 属性规定单元格可横跨的行数;...table id="tab" cellpadding="1

    HTML table表格编辑器

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

    HTML Table固定表头完美实现

    在网页设计中,HTML表格(Table)是一种常用的数据展示方式,尤其在处理结构化数据时。然而,当表格内容较多,需要滚动查看时,表头(Header)往往随着滚动消失,给用户阅读带来不便。本篇文章将探讨如何通过HTML、...

    html table列自定义排序排序

    table table自定义列排序;目前支持数值排序,文本(支持中文)排序; 示例: var option = { tableid: '#tableid', sortindex: 7, sorttype: "down", sortby: "text" }; $("#tableid").sortTable(option);

    html table 分页

    html table page

    页面html Table表格导出Execl

    "页面html Table表格导出Execl"这个主题涉及的技术点主要包括HTML表格的处理、JavaScript(或者jQuery)用于前端交互、以及可能涉及的后端处理和文件下载技术。下面我们将详细探讨这些知识点。 1. **HTML表格(HTML...

    HTML table的使用

    本实例将深入探讨如何有效地使用HTML `&lt;table&gt;` 元素来创建和定制表格。 首先,创建一个基本的HTML表格需要使用`&lt;table&gt;`标签作为容器,`&lt;tr&gt;`(表格行)定义每一行,`&lt;th&gt;`(表头)定义列的标题,而`&lt;td&gt;`(表格...

    利用js制作html table分页示例(js实现分页)

    标题所指的知识点为:利用JavaScript(简称js)技术来实现HTML表格(table)的分页功能。在前端开发中,分页是一种常见的数据展示模式,用于在有限的页面空间内展示大量数据。当需要展示的数据量太大,一次性加载到...

    c#画表格,自动创建htmltable的行与列

    HtmlTable table = new HtmlTable(); table.Border = 1; // 设置表格边框宽度 table.BorderColor = "#000000"; // 设置表格边框颜色 table.CellSpacing = 0; // 设置单元格间距 ``` #### 2. 添加行 (HtmlTableRow) ...

    js+html实现的Table可编辑

    1. **HTML Table元素**:HTML的`&lt;table&gt;`元素用于创建表格,它包括`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头单元格)和`&lt;td&gt;`(数据单元格)。在可编辑的表格中,`&lt;td&gt;`通常会转换成可以输入的`&lt;input&gt;`或`&lt;textarea&gt;`元素。 2. ...

    html table自动添加删除

    html页面实现table自动添加和删除

    基于jquery的固定html table表头/列头插件

    在网页设计中,数据展示往往是不可或缺的部分,而HTML表格(Table)是常用的数据展示工具。然而,当表格数据过多,需要滚动浏览时,表头(thead)和列头(th)随着滚动消失,使得用户难以对应数据列,降低了用户体验...

Global site tag (gtag.js) - Google Analytics