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

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>

执行结果：

本文链接：https://blog.csdn.net/pan_junbiao/article/details/98472073

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

如何把自己的驱动编译进内核或模块（Kconfig和Makefile）_nvp6324 驱动-程序员宅基地

文章浏览阅读905次。本说明以NVP6324为例。1、首先在drivers\media\i2c中修改Kconfig和Makefile，如下：在Kconfig中添加如下：config VIDEO_NVP6324 tristate "NVP6324 AHD sensor support" depends on I2C ---help--- This is a V4L2 sensor-le..._nvp6324 驱动

自适应直方图均衡（CLAHE) 代码及详细注释【OpenCV】_自适应双平台直方图均衡算法代码-程序员宅基地

文章浏览阅读2.7w次，点赞9次，收藏80次。理论请参考博客OpenCV源码的本地路径： %OPENCV%\opencv\sources\modules\imgproc\src\clahe.cppclahe.cpp// ----------------------------------------------------------------------// CLAHEnamespace{ class C_自适应双平台直方图均衡算法代码

计算机视觉及其图像处理操作-程序员宅基地

文章浏览阅读3.1k次，点赞3次，收藏22次。点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达作者丨吃猫的鱼python @CSDN编辑丨3D视觉开发者社区目录content一、什么是计算机视觉二、图片处理基础操作图片处理：读入图像图片处理：显示图像图片处理：图像保存三、图像处理入门基础图像成像原理介绍图像分类四、像素处理操作读取像素修改像素使用python中的numpy修改像素点五、获取图像属性形状像素数目图像类型六..._计算机视觉与图像处理

欠拟合、过拟合现象，及解决办法_svm过拟合怎么解决-程序员宅基地

文章浏览阅读7.4k次，点赞6次，收藏112次。@创建于：2022.05.27@修改于：2022.05.27文章目录1、过拟合与欠拟合2、欠拟合2.1 出现的原因2.2 解决的办法3、过拟合3.1 出现的原因3.2 解决的办法4. Early stopping5、Dropout6、L1 和 L2 正则化7、参考资料1、过拟合与欠拟合机器学习中模型的泛化能力强的模型才是好模型。对于训练好的模型：若在训练集表现差，不必说在测试集表现同样会很差，这可能是欠拟合导致；若模型在训练集表现非常好，却在测试集上差强人意，则这便是过拟合导致的。过拟合_svm过拟合怎么解决

go上传文件-程序员宅基地

文章浏览阅读102次。【代码】go上传文件。

【转】目前常用AD/DA芯片简介_分辨率0.5的ad芯片-程序员宅基地

文章浏览阅读2.9k次。_分辨率0.5的ad芯片

随便推点

成为JavaGC专家Part II：如何监控Java垃圾回收机制-程序员宅基地

文章浏览阅读215次。成为JavaGC专家Part II ：如何监控Java垃圾回收机制本文是成为Java GC专家系列文章的第二篇。在第一篇《深入浅出Java垃圾回收机制》中我们学习了不同GC算法的执行过程，GC是如何工作的，什么是新生代和老年代，你应该了解的JDK7中的5种GC类型，以及这5种类型对于应用性能的影响。在本文中，我将解释JVM到底是如何执行垃圾回收处理..._成为javagc专家part ii — 如何监控java垃圾回收机制。

python学习导航线_python点线导航-程序员宅基地

文章浏览阅读122次。文章目录python学习导航线一、seleniumpython-selenium二、python基础知识python的聊天室python学习导航线一、seleniumpython-selenium二、python基础知识python的聊天室_python点线导航

静态成员-静态成员变量-程序员宅基地

文章浏览阅读3.4k次，点赞4次，收藏22次。静态成员静态成员都是用static修饰，它的特点是不论创建多少个对象，程序都只创建一个静态成员。最主要的特点：共享什么是共享呢？例如：统计超市中所有商品数量的总和，商品数量的总和是随着每一个数量的变化而变化的，这是我们就可以用静态成员处理。（代码下面有写）静态成员又分为静态成员变量和静态成员函数。（一）静态成员变量特点：1、所有对象共享一份数据。 2、在编译阶段分配内存。 3、类内声明，类外初始化。#include<io..._静态成员变量

HTML5七夕情人节表白网页制作【情人节满屏爱心HTML5特效】HTML+CSS+JavaScript html生日快乐祝福网页制作_html 满屏爱心-程序员宅基地

文章浏览阅读879次，点赞21次，收藏20次。1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。_html 满屏爱心

【易飞】易飞ERP自动审核程序功能_易飞单据审批设置-程序员宅基地

文章浏览阅读492次，点赞9次，收藏5次。【代码】【易飞】易飞ERP自动审核程序功能。_易飞单据审批设置

青少年CTF擂台挑战赛 2024 #Round 1_xyctf高校新生联合赛 2024-程序员宅基地

文章浏览阅读1.6k次，点赞15次，收藏30次。文件打开是一个print数组v4的地址和read函数，并且nx好像可写，输入长度可以利用，进行一个栈上写好自己的shell，然后在构造一个回到v4的地址，这样子就可以重新读取到写buf段上的shell，这里要注意shell的隔断用/00截断然后构造好栈上数据。一个sql注入题目，尝试使用二分查找，但只能爆出表名和列名，值一直出不来，后来采用布尔盲注，fuzz测试后发现没有加任何过滤，直接写脚本。第二题：为了求解方程（5 + sqrt{x} = 8），我们可以分离平方根项，然后求解（x）。_xyctf高校新生联合赛 2024