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

智能推荐

Win7/Win10移动用户文件夹(C:\Users)移到非系统盘(如D:)_该应用程序位于未经授权的位置 请移至非系统文件夹-程序员宅基地

文章浏览阅读8.8w次，点赞48次，收藏252次。Windows的用户文件夹默认所在位置是系统盘（通常是C盘）下的“\Users”目录之内。该文件夹中保存着所有的用户个人数据，比如你保存在“桌面”上的文件（实际上是保存在C:\Users\你的用户名\Desktop\目录之中），再比如你保存在“我的文档”里的文件（实际上是保存在C:\Users\用户名\Documents目录之中）。用户文件夹处于系统盘的坏处在于，如若系统盘一旦坏掉，就可能连带用..._该应用程序位于未经授权的位置 请移至非系统文件夹

约瑟夫环的数学公式推导_约瑟夫出圈问题公式-程序员宅基地

文章浏览阅读6.7k次，点赞7次，收藏35次。约瑟夫环的数学方法解决 编写约瑟夫环程序时会发现，当我们把整个报数过程的人数N变的很大，例如到几百万，虽然在最后还是只剩下两个人报数，但也要循环几百万次才能确定最后留下来的那个人。这样程序执行的效率不高，会占用大量时间去执行循环的过程。有时会发生输出一直等待很长时间才能出来结果。经过查询资料，找到了约瑟夫环的数学解决方法，以及它的算法具体执行的过程来做分享。我们假设..._约瑟夫出圈问题公式

软件测试|Pytest必会使用autouse实现自动传参-程序员宅基地

文章浏览阅读120次。1.薪资丰厚： 基本薪资+绩效+项目奖金+年终奖2.福利： 和正式员工福利基本看齐，共享工位，免费夜宵，班车，一流办公环境，月末周六双倍工资3.技术栈：C/C+当用例很多的时候，每次。不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦。不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦虑不焦。

基于51单片机冰箱温度控制器设计_基于51单片机的智能冰箱控制系统设计-程序员宅基地

文章浏览阅读871次，点赞11次，收藏3次。*单片机设计介绍， 基于51单片机冰箱温度控制器设计。_基于51单片机的智能冰箱控制系统设计

ubuntu创建sftp和ftp服务器及相应的用户管理_ubuntu sftp服务器查看用户和密码-程序员宅基地

文章浏览阅读4.8k次。一、sftp服务器进入root模式（下面的操作默认都是在root用户下）#安装openssh-serverapt-get install -y openssh-server创建sftp的组和用户#创建sftp-users组groupadd sftp-users#创建sftp用户目录alicemkdir /home/alice#创建sftp用户alice，并且绑定其主目..._ubuntu sftp服务器查看用户和密码

关于在simulink中使用s-function后出现State derivatives returned by S-function during flag=1 call must be a rea_state derivatives returned by s-function 'pmsm' in-程序员宅基地

文章浏览阅读5.9k次，点赞9次，收藏16次。解决了在simulink中使用s-function遇到的报错：State derivatives returned by S-function 'demo' in 'test/S-Function' during flag=1 call must be a real vector of length 2 _state derivatives returned by s-function 'pmsm' in 'ipmsm/ipmsm/s-function1

随便推点

Web实训项目--网页设计（附源码）_web前端网页设计代码-程序员宅基地

文章浏览阅读4.3w次，点赞79次，收藏882次。我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。学习如何设计网页中的轮播图和动画效果，并掌握a标签文本内容跳转、超链接的应用、播放音乐与视频等操作。通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。1、使用Web知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用。_web前端网页设计代码

Matlab：非负 ODE 解_matlab銝要onnegative-程序员宅基地

Matlab中讲解了如何约束ODE解为非负解的示例，并以绝对值函数和膝盖问题为例进行了说明。文章指出在某些情况下，由于方程的物理解释或解性质的原因，施加非负约束是必要的。

关于g2o_viewer data/result_after.g2o使用过程中coredump、与lsd_slam依赖包libg2o冲突问题_libg2o_-程序员宅基地

文章浏览阅读1.1k次。电脑上装的东西多了就很容引起版本或者依赖问题。。。这不，按照高博教程做octomap实验时候运行g2o_viewer data/result_after.g2o时候就直接coredump。。。。回想起来自己ROS系统中装了libg2o，于是卸载之：sudo apt-get remove ros-indigo-libg2o然后重新执行g2o_viewer data/result_after.g2o注..._libg2o_

学习通选修刷课使用过程（懂得都懂）_学习通脚本-程序员宅基地

文章浏览阅读2w次，点赞58次，收藏268次。学习通不想好好上课系列_学习通脚本

将Total Commander设置为“默认”文件管理器？_total commander默认文件管理器-程序员宅基地

文章浏览阅读1.6k次。将Total Commander设置为“默认”文件管理器？法一：开始，运行，输入regedit ，回车: 定位到HKEY_LOCAL_MACHINE_total commander默认文件管理器

C#反序列化无法找到程序集_未能找到程序集“g:\c#%5cc#%20%e4%b8%8a%e4%bd%8d%e6%9c%ba%5-程序员宅基地

文章浏览阅读7.7k次。反序列化无法找到程序集提示找不到程序集. 原因是序列化时把序列化类的命名空间等信息保存了，但应用程序和类库的命名空间可能是不一样的,所以提示找不到程序集. 解决方法如下: 方法1.将dll加入强名称，注册到全局程序集缓存中 方法2.在反序列化使用的IFormatter 对象加入Binder 属性,使其获取要反序列化的对象所在的程序集_未能找到程序集“g:\c#%5cc#%20%e4%b8%8a%e4%bd%8d%e6%9c%ba%5c%e7%a9%ba%e5%8e%8

推荐文章

热门文章

相关标签