null - 程序员宅基地

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

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

智能推荐

初始化时checkbox选中问题-程序员宅基地

文章浏览阅读746次。首先我们大家在写页面的时候可能回经常遇到checkbox、radio等一些使选中或者是不选中的问题。这是我在项目当中做的时候发现的一个小知识点，把它赶紧记录下来。以便以后复习与巩固。现把代码写出来再解释： function operateCheckOrRadio() { var sForm = document.getElementById("sform"); var sStatus = d..._flutter checkbox用变量初始化无法设置为选中状态

UE5——问题——MediaPlayer的使用播放视频注意点_ue mediaplayer-程序员宅基地

文章浏览阅读1.1k次。UE5——问题——MediaPlayer的使用播放视频注意点_ue mediaplayer

毕设仿真分享单片机非接触式红外感应体温计-程序员宅基地

文章浏览阅读311次，点赞9次，收藏7次。非接触式电子体温计主要利用红外测温原理，一切温度高于绝对零度（-273.35℃）的物体，由于分子热运动，物体会不停地向外辐射能量。物体辐射能量的大小与它的表面温度有十分密切的关系。因此，通过测量物体辐射的能量，就能够测量出物体的温度。本用户手册中的非接触式电子体温计就是利用这种测量方法，实现测量人体体温的功能。

Vista/Win7下普通权限进程动态提升权限_findwindow 没有权限-程序员宅基地

文章浏览阅读2k次。本文出自 “碧海笙箫” 博客，请务必保留此出处http://pyhcx.blog.51cto.com/713166/197073一、前提在Vista/Win7下，加强了对安全的管理，对注册表修改，系统目录的文件操作，都需要管理员权限才能完成(当然虚拟存储机制，表面上也相当于能操作)。所以，对于程序中有相关操作的，这时候，就要求我们的程序必须拥有管理员权限。通过mainfest文件，我们可以让程序总是需要管理员权限执行，但是，这将导致程序每次运行时，都需要弹出UAC框老骚扰用户，另外，有时候我们的程序只是在某_findwindow 没有权限

PCS7 入门指南 v9.0 SP3 v9.1 中文版学习资料（官方公开可用资料）_pcs7v9.1-程序员宅基地

文章浏览阅读1.8w次，点赞13次，收藏82次。链接：https://pan.baidu.com/s/1-p4h_QDL8BN04tnn3vSkOA提取码：nou3PCS7入门指南v9.0含APL（包含PDF和项目文件）官方地址：SIMATIC 过程控制系统 PCS 7 入门指南第1部分 (V9.0，含APL)https://support.industry.siemens.com/cs/document/109756196/simatic-%E8%BF%87%E7%A8%8B%E6%8E%A7%E5%88%B6%E7%B3%BB..._pcs7v9.1

c# 调用非托管代码_c# 声明kernel32 函数-程序员宅基地

文章浏览阅读956次，点赞3次，收藏5次。编程过程中，一般c#调用非托管的代码有两种方式：1.直接调用从DLL中导出的函数。2.调用COM对象上的接口方法。首先说明第1种方式，基本步骤如下：1.使用关键字static,extern声明需要导出的函数。2.把DllImport 属性附加到函数上。3.掌握常用的数据类型传递的对应关系。4.如果需要，为函数的参数和返回值指定自定义数据封送处理信息，这将重写.net framework默认的封送处理。简单举例如下：托管函数原型：DWORD GetShortPathName(LPCTST_c# 声明kernel32 函数

随便推点

敏捷软件开发宣言-程序员宅基地

文章浏览阅读507次。敏捷软件开发宣言摘要：我们正在通过亲身实践以及帮助他人实践，揭示更好的软件开发方法。通过这项工作，我们认为：个体和交互胜过过程和工具可以工作的软件胜过面面俱到的文档客户合作胜过合同谈判响应变化胜过遵循计划虽然右项也具有价值，但我们认为左项具有更大的价值。Kent Beck James Grenning Robert C._敏捷软件开发宣言

Android实现通用的ActivityGroup（效果类似Android微博客户端主界面）-程序员宅基地

文章浏览阅读93次。转自http://www.cnblogs.com/answer1991/archive/2012/05/08/2489844.html ActivityGroup在实际的开发中是十分常见的，在我使用过的Android应用中，十个应用里面有九个应用的主界面都是使用ActivityGroup的。说起ActivityGroup，在国内好像直接使用它开发的并不多，基本都是使用Ta..._android 类似于微博tab,动态添加tab,并实现拖拽排序,编辑等

git：一、GIT介绍+安装+全局配置+基础操作_请确保本地完成了 git 的全局配置-程序员宅基地

文章浏览阅读490次。仅供学习使用。执行命令git init，发现文件夹出现.git目录即说明创建本地仓库成功。创建的文件名为空，拓展名是bashrc，所以要开启文件的拓展名选项并检查该文件的格式是否为Bash RC源文件。工作区的文件创建或修改后通过git add提交到暂存区，暂存区的文件通过git commit提交到仓库。创建一个测试用的文件夹，进入后右键打开Git Bash，设置用户信息。ATT：红色的是工作区的文件，绿色的是暂存区的文件。GIT的流程分为三大块：工作区、暂存区、仓库。_请确保本地完成了 git 的全局配置

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

1、表格标记

1.1 显示表格边框

1.2 合并单元格

2、漂亮的Table表格模板

模板1：

模板2：

模板3：

智能推荐

初始化时checkbox选中问题-程序员宅基地

UE5——问题——MediaPlayer的使用播放视频注意点_ue mediaplayer-程序员宅基地

毕设仿真分享单片机非接触式红外感应体温计-程序员宅基地

Vista/Win7下普通权限进程动态提升权限_findwindow 没有权限-程序员宅基地

PCS7 入门指南 v9.0 SP3 v9.1 中文版学习资料（官方公开可用资料）_pcs7v9.1-程序员宅基地

c# 调用非托管代码_c# 声明kernel32 函数-程序员宅基地

随便推点

敏捷软件开发宣言-程序员宅基地

Android实现通用的ActivityGroup（效果类似Android微博客户端主界面）-程序员宅基地

git：一、GIT介绍+安装+全局配置+基础操作_请确保本地完成了 git 的全局配置-程序员宅基地

文件服务（SMB）共享详解-程序员宅基地

鸿蒙系统第五批升级名单,鸿蒙系统首批升级机型名单曝光，很多人失望了，支持的机型太少...-程序员宅基地

ES6——Map和Set-程序员宅基地

推荐文章

热门文章

相关标签