HTML中Table表格的使用与漂亮的表格模板_html table 样式-程序员宅基地

技术标签： Table  HTML和CSS  HTML  我の原创  

1、表格标记

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。

标记 说明
表格标记<table> <table></table>标记表示整个表格。<table>标记中有很多属性，例如 width 属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对其方式，bgcolor 属性用来设置表格的背景色等。
标题标记<caption> 标题标记以<caption>开头，以</caption>结束，标题标记也有一些属性，例如：align、valign 等。
表格行标记<tr> 一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用，该标记也具有 algin、background 等属性。
表头标记<th> 表头标记以<th>开头，以</th>结束，也可以通过 algin、background、colspan、valign 等属性来设置表头。
单元格标记<td> 单元格标记<td>又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有 algin、background、valign 等属性。

1.1 显示表格边框

方法一：在<table>标记中添加属性：border="1" cellspacing="0"，如下：

<table border="1" cellspacing="0">
</table>

说明：

border="1"表示设置表格边框1px；

cellspacing="0"表示设置表格边框间距为0，即无边距。

方法二：使用CSS样式。

table { border-collapse: collapse;}
table,table tr th, table tr td { border:1px solid #000000; }

1.2 合并单元格

colspan 是列合并，rowspan是行合并。

示例：在页面中定义学生成绩表，并在表格中显示边框，同时使用单元格合并。

<html>
<head>
    <title>表格标记</title>
    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; }
    </style>
</head>
<body>
<table  align="center">
    <caption>学生考试成绩单</caption>
    <tr>
        <th align="center" valign="middle">姓名</th>
        <th align="center" valign="middle">语文</th>
        <th align="center" valign="middle">数学</th>
        <th align="center" valign="middle">英语</th>
    </tr>
    <tr>
        <td align="center" valign="middle">张三</td>
        <td align="center" valign="middle">89</td>
        <td align="center" valign="middle">92</td>
        <td align="center" valign="middle">87</td>
    </tr>
    <tr>
        <td align="center" valign="middle">李四</td>
        <td align="center" valign="middle">93</td>
        <td align="center" valign="middle">86</td>
        <td align="center" valign="middle">80</td>
    </tr>
    <tr>
        <td align="center" valign="middle">王五</td>
        <td align="center" valign="middle">85</td>
        <td align="center" valign="middle">86</td>
        <td align="center" valign="middle">90</td>
    </tr>
    <tr>
        <th rowspan="2" align="center" valign="middle">博客信息</th>
        <td colspan="3" align="center" valign="middle">您好，欢迎访问 pan_junbiao的博客</td>
    </tr>
    <tr>
        <td colspan="3" align="center" valign="middle">博客地址：https://blog.csdn.net/pan_junbiao</td>
    </tr>
</table>
</body>

执行结果：

 

2、漂亮的Table表格模板

以下是来自 hipenpal.com 网站提供的一些漂亮的Table表格模板。

更多模板可以访问 hipenpal.com 网站，请点击：漂亮的Table表格模板

模板1：

<style>
    .table11_7 table {
        width:100%;
        margin:15px 0;
        border:0;
    }
    .table11_7 th {
        background-color:#00A5FF;
        color:#FFFFFF
    }
    .table11_7,.table11_7 th,.table11_7 td {
        font-size:0.95em;
        text-align:center;
        padding:4px;
        border-collapse:collapse;
    }
    .table11_7 th,.table11_7 td {
        border: 1px solid #2087fe;
        border-width:1px 0 1px 0;
        border:2px inset #ffffff;
    }
    .table11_7 tr {
        border: 1px solid #ffffff;
    }
    .table11_7 tr:nth-child(odd){
        background-color:#aae1fe;
    }
    .table11_7 tr:nth-child(even){
        background-color:#ffffff;
    }
</style>
<table class=table11_7>
    <tr>
        <th>SAMPLE</th><th>SAMPLE</th><th>SAMPLE</th>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
</table>

执行结果：

 

模板2：

<style>
    .table11_6 table {
        width:100%;
        margin:15px 0;
        border:0;
    }
    .table11_6 th {
        background-color:#96C7ED;
        color:#000000
    }
    .table11_6,.table11_6 th,.table11_6 td {
        font-size:0.95em;
        text-align:center;
        padding:4px;
        border-collapse:collapse;
    }
    .table11_6 th,.table11_6 td {
        border: 1px solid #73b4e7;
        border-width:1px 0 1px 0;
        border:2px inset #ffffff;
    }
    .table11_6 tr {
        border: 1px solid #ffffff;
    }
    .table11_6 tr:nth-child(odd){
        background-color:#dcecf9;
    }
    .table11_6 tr:nth-child(even){
        background-color:#ffffff;
    }
</style>
<table class=table11_6>
    <tr>
        <th>SAMPLE</th><th>SAMPLE</th><th>SAMPLE</th>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
</table>

执行结果：

 

模板3：

<style>
    .table11_3 table {
        width:100%;
        margin:15px 0;
        border:0;
    }
    .table11_3 th {
        background-color:#FF5675;
        color:#FFFFFF
    }
    .table11_3,.table11_3 th,.table11_3 td {
        font-size:0.95em;
        text-align:center;
        padding:4px;
        border-collapse:collapse;
    }
    .table11_3 th,.table11_3 td {
        border: 1px solid #fe2047;
        border-width:1px 0 1px 0;
        border:2px inset #ffffff;
    }
    .table11_3 tr {
        border: 1px solid #ffffff;
    }
    .table11_3 tr:nth-child(odd){
        background-color:#fec6d1;
    }
    .table11_3 tr:nth-child(even){
        background-color:#ffffff;
    }
</style>
<table class=table11_3>
    <tr>
        <th>SAMPLE</th><th>SAMPLE</th><th>SAMPLE</th>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
    <tr>
        <td>SAMPLE</td><td>SAMPLE</td><td>SAMPLE</td>
    </tr>
</table>

执行结果：

 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pan_junbiao/article/details/98472073

智能推荐

python overflowerror_python – 是否真的引发了OverflowError？-程序员宅基地

文章浏览阅读520次。Python 2.7.2 (v2.7.2:8527427914a2, Jun 11 2011, 15:22:34)[GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwinType "help", "copyright", "credits" or "license" for more information.>>> float(1...

详解SwiftUI数据流是怎么在View间传递的_ios 怎么把swiftui事件传到uiview里-程序员宅基地

文章浏览阅读1.9k次。作为一个声明式的UI框架，SwiftUI帮我们处理了几乎所有关于UI和数据之间的交互，这使我们不再需要关注数据变化时刷新UI和用户交互以后更新数据的逻辑。为了实现数据和UI的绑定，我们需要利用Swift的一些关属性包装器来向SwiftUI描述它们之间的关系，那么让我们开始吧。到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。State Properties @State在前面的一篇文章中当我们给数组添加或者删除元素时，列表会自动响应变化，正是因为使用了@State._ios 怎么把swiftui事件传到uiview里

1-8 linux系统中的软件管理-程序员宅基地

文章浏览阅读99次。#### 1.Linux中软件包的类型 ####1.DEB#UBlinux DEBlinux2.RPM #redhat centOS fadora3.bz2|gz|xz#1.需要源码安装需要编译 #2.绿色软件,直接可用 #ntfs-3g_ntfsprogs-2017.3.23.tgz需要编译 "configur...

基于动态用户偏好和服务质量的推荐算法-程序员宅基地

文章浏览阅读4.9k次。引用：Zhang Y, Qian Y, Wang Y. A RecommendationAlgorithm Based on Dynamic User Preference and Service Quality[C]//2018 IEEEInternational Conference on Web Services (ICWS). IEEE, 2018: 91-98.摘要：在服务计算领域...

python二级考试选择题公共基础知识_计算机二级选择题（公共基础知识）-程序员宅基地

文章浏览阅读1.9k次。在这一期的文章主要以计算机二级选择题的公共基础知识进行讲解。在计算机二级考试当中，选择题中的二级公共基础知识是必考的部分。很多考生对计算机二级的公共基础知识选择题有很多不解。二级公共基础知识选择题主要考这些内容。未来教育题库界面截图主要由四章内容组成：数据库结构与算法、程序设计基础、软件工程基础、数据库设计基础一、数据库结构与算法这一章主要难点是对栈与队列以及树与二叉树的理解。话不多说，，直接上例..._计算机二级python公共基础题选择题是什么

VS2013 修改TFS的本地映射路径-程序员宅基地

文章浏览阅读2.2k次。在源代码管理器里面 找到你的本地工作区然后点击编辑按钮修改本地目录_vs怎么更改映射路径

随便推点

Android面试官，面试时总喜欢挖基础坑，整理了26道面试题牢固你基础！(3)-程序员宅基地

文章浏览阅读795次，点赞20次，收藏15次。AIDL是使用bind机制来工作。java原生参数Stringparcelablelist & map 元素 需要支持AIDL其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。

机器学习-数学基础02补充_李孟_新浪博客-程序员宅基地

文章浏览阅读248次。承接：数据基础02

短沟道效应 & 窄宽度效应 short channel effects & narrow width effects-程序员宅基地

文章浏览阅读2.8w次，点赞14次，收藏88次。文章目录1. 概念：Narrow Width Effect: 窄宽度效应Short Channel effects：短沟道效应阈值电压 （Threshold voltage）2. 阈值电压与沟道长和沟道宽的关系：Narrow channel 窄沟的分析Short channel 短沟的分析1. 概念：Narrow Width Effect: 窄宽度效应在CMOS器件工艺中，器件的阈值电压Vth 随着沟道宽度的变窄而增大，即窄宽度效应；目前，由于浅沟道隔离工艺的应用，器件的阈值电压 Vth 随着沟道宽度_短沟道效应

小米组织架构再调整，王川调职，雷军自任中国区总裁_小米更换硬件负责人-程序员宅基地

文章浏览阅读335次。5月17日，小米集团再发组织架构调整及任命通知。新通知主要内容为前小米中国区负责人王川调职，雷军自任中国区总裁。小米频繁调整背后，雷军有些着急了中国区手机业务持续下滑。根据IDC最近公布的数据，小米一季度全球出货量为2750万台，相比去年同期的2780万台，小幅下降。参考Canalys、Counterpoint的统计，小米一季度出货量也都录得1%的同比下滑。作为对比，IDC数据显示，华为同期出..._小米更换硬件负责人

JAVA基础学习大全（笔记）_java学习笔记word-程序员宅基地

文章浏览阅读9.1w次。JAVASE和JAVAEE的区别JDK的安装路径[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-perPRPgq-1608641067105)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201222001641906.png)]卸载和安装JDK[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYnXvbAn-1608641067107)(C:\Users_java学习笔记word

vue-echarts饼图/柱状图点击事件_echarts 饼图点击事件-程序员宅基地

文章浏览阅读7.8k次，点赞2次，收藏17次。在实际的项目开发中，我们通常会用到Echarts来对数据进行展示，有时候需要用到Echarts的点击事件，增加系统的交互性，一般是点击Echarts图像的具体项来跳转路由并携带参数，当然也可以根据具体需求来做其他的业务逻辑。下面就Echarts图表的点击事件进行实现，文章省略了Echarts图的html代码，构建过程，option，适用的表格有饼图、柱状图、折线图。如果在实现过程中，遇到困难或者有说明好的建议，欢迎留言提问。_echarts 饼图点击事件

推荐文章

热门文章

相关标签