原文链接http://www.cnblogs.com/wifi/archive/2011/12/08/2280930.html
普通table表格样式及代码大全(全)(一)
|
单实线边框表格
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>单实线边框表格</DIV></TD></TR></TBODY></TABLE>
|
虚线边框表格
|
<TABLE style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虚线边框表格</DIV></TD></TR></TBODY></TABLE>
|
点线边框表格
|
<TABLE style="BORDER-RIGHT: #ff6600 2px dotted; BORDER-TOP: #ff6600 2px dotted; BORDER-LEFT: #ff6600 2px dotted; BORDER-BOTTOM: #ff6600 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#ff6600 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>点线边框表格</DIV></TD></TR></TBODY></TABLE>
|
双实线边框表格
|
<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>双实线边框表格</DIV></TD></TR></TBODY></TABLE>
|
槽线边框表格
|
<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽线边框表格</DIV></TD></TR></TBODY></TABLE>
|
脊线边框表格
|
<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊线边框表格</DIV></TD></TR></TBODY></TABLE>
|
内凹效果边框
|
<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>内凹效果边框</DIV></TD></TR></TBODY></TABLE>
|
外凸效果边框
|
<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果边框</DIV></TD></TR></TBODY></TABLE>
|
内虚外实边框
|
<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>内虚外实边框</DIV></TD></TR></TBODY></TABLE>
|
外虚内实边框
|
<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虚内实边框</DIV></TD></TR></TBODY></TABLE>
|
无边框表格
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>无边框表格</DIV></TD></TR></TBODY></TABLE>
| 隐藏下边框 |
<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none" height=40>隐藏下边框</TD></TR></TBODY></TABLE>
| 隐藏上边框 |
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none" height=40>隐藏上边框</TD></TR></TBODY></TABLE>
| 隐藏左边框 |
<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none" height=40>隐藏左边框 </TD></TR></TBODY></TABLE>
| 隐藏右边框 |
<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none" height=40>隐藏右边框 </TD></TR></TBODY></TABLE>
| 隐藏左右边框 |
<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隐藏左右边框 </TD></TR></TBODY></TABLE>
| 隐藏上下边框 |
<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隐藏上下边框</TD></TR></TBODY></TABLE>
| 只显示上边框 |
<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>
<TBODY>
<TR align=middle>
<TD height=40>只显示上边框</TD></TR></TBODY></TABLE>
| 只显示下边框 |
<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>
<TBODY>
<TR align=middle>
<TD height=40>只显示下边框</TD></TR></TBODY></TABLE>
| 只显示左边框 |
<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>
<TBODY>
<TR align=middle>
<TD height=40>只显示左边框</TD></TR></TBODY></TABLE>
| 只显示右边框 |
<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs>
<TBODY>
<TR align=middle>
<TD height=40>只显示右边框</TD></TR></TBODY></TABLE>
| 不显示任何边框 |
<TABLE borderColor=#ff6600 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void>
<TBODY>
<TR align=middle>
<TD height=40>不显示任何边框</TD></TR></TBODY></TABLE>
|
单行单列
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD height=40>
<DIV align=center>单行单列</DIV></TD></TR></TBODY></TABLE>
|
一行多列
|
一行多列
|
一行多列
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD></TR></TBODY></TABLE>
|
一列多行
|
|
一列多行
|
|
一列多行
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR></TR></TBODY></TABLE>
|
多行多列
|
多行多列
|
多行多列
|
|
多行多列
|
多行多列
|
多行多列
|
|
多行多列
|
多行多列
|
多行多列
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TD width=100>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TR>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD>
<TD>
<DIV align=center>多行多列</DIV></TD></TR></TR></TR></TBODY></TABLE>
|
合并列的表格
|
||
|
合并列的表格
|
合并列的表格
|
合并列的表格
|
|
合并列的表格
|
合并列的表格
|
合并列的表格
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD colSpan=3>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并列的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD>
<TD>
<DIV align=center>合并列的表格</DIV></TD></TR></TR></TR></TBODY></TABLE>
|
合并行的表格
|
合并行的表格
|
合并行的表格
|
|
合并行的表格
|
合并行的表格
|
|
|
合并行的表格
|
合并行的表格
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100 rowSpan=3>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TD width=100>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TR>
<TD>
<DIV align=center>合并行的表格</DIV></TD>
<TD>
<DIV align=center>合并行的表格</DIV></TD></TR></TR></TR></TBODY></TABLE>
|
复杂表格
|
复杂表格
|
复杂表格
|
||
|
复杂表格
|
复杂表格
|
复杂表格
|
复杂表格
|
复杂表格
|
|
复杂表格
|
复杂表格
|
复杂表格
|
||
|
复杂表格
|
复杂表格
|
复杂表格
|
||
|
复杂表格
|
复杂表格
|
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TD width=180 colSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD width=60>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD rowSpan=4>
<DIV align=center>复杂表格</DIV></TD>
<TD rowSpan=3>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TR>
<TD>
<DIV align=center>复杂表格</DIV></TD>
<TD colSpan=3>
<DIV align=center>复杂表格</DIV></TD></TR></TR>< /TR></TR></TR></TBODY></TABLE>
| 隐藏 | 横向 | 分隔线 |
| 隐藏 | 横向 | 分隔线 |
| 隐藏 | 横向 | 分隔线 |
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=cols width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>横向</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>横向</TD>
<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>
| 隐藏 | 纵向 | 分隔线 |
| 隐藏 | 纵向 | 分隔线 |
| 隐藏 | 纵向 | 分隔线 |
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=rows width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>纵向</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵向</TD>
<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>
| 隐藏 | 纵横 | 分隔线 |
| 隐藏 | 纵横 | 分隔线 |
| 隐藏 | 纵横 | 分隔线 |
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#ff0033 cellSpacing=0 rules=none width=300 align=center bgColor=#e1f8ff border=1>
<TBODY>
<TR>
<TD width=100>隐藏</TD>
<TD width=100>纵横</TD>
<TD width=100>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD>
<TR>
<TD>隐藏</TD>
<TD>纵横</TD>
<TD>分隔线</TD></TR></TR></TR></TBODY></TABLE>
|
文本内容——标题位于表体外的表格
|
<TABLE width=250 align=center border=0>
<CAPTION>标题</CAPTION>
<TBODY>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体外的表格</DIV></TD></TR></TBODY></TABLE>
|
标题
|
|
文本内容——标题位于表体内的表格
|
<TABLE width=250 align=center border=0>
<TBODY>
<TR>
<TD bgColor=#999999>
<DIV align=center><FONT color=#ffffff><B>标题</B></FONT></DIV></TD></TR>
<TR>
<TD bgColor=#cccccc>
<DIV style="HEIGHT: 60px" align=center>文本内容——标题位于表体内的表格</DIV></TD></TR></TBODY></TABLE>
标题
<FIELDSET style="WIDTH: 250px" align=center><LEGEND>标题</LEGEND>
<DIV align=center>文本内容——标题位于边框上的表格</DIV>
<DIV align=center> </DIV></FIELDSET>
|
表中表
文本内容——表中表效果 |
<TABLE cellSpacing=0 cellPadding=0 width=250 align=center>
<TBODY>
<TR>
<TD>
<FIELDSET style="WIDTH: 250px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" align=center><LEGEND style="BORDER-RIGHT: #808080 1px solid; BORDER-TOP: #808080 1px solid; BORDER-LEFT: #808080 1px solid; background-Color: #e1f8ff; BORDER-BOTTOM: #808080 1px solid"><FONT color=#000000>表中表</FONT> </LEGEND>
<P align=center>文本内容——表中表效果</P></FIELDSET> </TD></TR></TBODY></TABLE>
相关推荐
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
在网页设计中，表格（Table）是用于组织数据的重要元素，而当表格嵌套时，如何设置合适的边框样式就显得尤为重要。`table嵌套table的边框样式`是一个常见的需求，尤其在处理复杂的数据展示时。本篇将详细介绍如何...
实现圆角的加以方法，其他特效
根据给定文件的信息，本文将详细介绍几种实用的表格（table）样式，并且深入解析每种样式的具体实现方法。这几种样式包括纯CSS样式、图片背景的CSS样式、颜色变化的CSS样式以及需要JavaScript支持的表格样式。 ### ...
"table样式.zip"这个压缩包就是为此目的提供的，它包含了一些预设的、美观的Table样式，帮助开发者快速创建出吸引眼球的前台Table。 在"tablecloth"这个文件中，我们可以找到一系列CSS样式和可能的HTML结构示例，...
综上所述，创建“漂亮的table表格样式”涉及多个CSS属性的运用，包括颜色、边框、背景、悬停效果以及过渡动画。通过合理组合这些元素，我们可以制作出既美观又实用的HTML表格，提升网页的整体视觉体验。
"漂亮的table样式（内附css）"这个主题就是围绕如何使用CSS为HTML表格添加吸引力，使其更加美观和专业。 首先，我们需要了解HTML表格的基本结构，它由`<table>`元素开始，然后包含`<tr>`（行）元素，每个`<tr>`中...
本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式，包括水平对齐的单元格、行高亮以及可选的striped（斑马纹）和bordered（带边框）样式。通过添加`...
本篇文章将详细解析“普通table表格样式及代码大全(全)”中的各种表格样式，包括单实线边框、虚线边框、点线边框、双实线边框、槽线边框、脊线边框以及内凹效果边框，帮助你理解和掌握这些基本样式的设计与实现方法...
本资源提供的"企业级Table样式"旨在为开发者提供一套专业、美观的表格样式方案，适用于各种业务场景。 这套Table样式的设计理念是简洁与实用并重，力求在保证信息清晰易读的同时，提升整体视觉效果。其主要特点包括...
好看的css table列表样式
总的来说，"经典使用的table样式"涵盖了从基本的样式设计到高级的交互功能，通过使用如TableCloth这样的工具，开发者可以轻松实现这些效果，提升表格在网页中的呈现质量和用户体验。同时，理解并掌握这些样式和功能...
好的table样式，职业的table样式 类似公司系统的那种比较专业的table样式
svg table 样式
在网页开发中，表格（Table）是展示数据的重要方式，而jqGrid是一个强大的JavaScript库，专门用于创建交互式、功能丰富的表格。本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先，我们需要...
根据给定的信息，本文将详细解释两种HTML表格的样式：单像素边框CSS表格与带背景图的CSS样式表格，并简要介绍一种自动换整行颜色的CSS样式表格（需要用到JavaScript）。 ### 一、单像素边框CSS表格 #### 1.1 CSS...
在网页设计中，表格（Table）是一种常见的数据展示方式，用于组织和排列结构化信息。在JavaScript（JS）中，我们可以对表格进行自定义样式，使其看起来更加美观和交互性更强。本文将深入探讨如何利用JavaScript实现...
在这个主题"CSS样式Table[6] - style-table"中，我们将深入探讨如何使用CSS来美化和控制表格的样式。 表格在数据展示和组织信息时非常有用，但默认的HTML表格样式通常较为朴素。CSS提供了丰富的选择器和属性，让...
### Table细线样式的理解和实现 #### 一、概述 在网页设计中，表格（Table）是一种非常重要的布局工具，可以用来展示数据或构建页面结构。对于追求美观和细节的设计师来说，如何设置表格的边框样式尤为重要。本文...
可以定位到Bootstrap Table的CSS类，如`.pagination`, `.page-item`, `.page-link`等，并添加或覆盖原有样式。 - **模板定制**：Bootstrap Table允许用户自定义分页栏的HTML模板。通过设置`paginationTemplate`选项...