HTML中Table表格的使用与漂亮的表格模板

柔光的暖阳◎ 2021-09-30 14:14 1405阅读 0赞

# 1、表格标记 #

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

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

## 1.1 显示表格边框 ##

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

**说明：**

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>

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

# 2、漂亮的Table表格模板 #

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

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

## **模板1：** ##

**执行结果：**

![20190804175908426.png][]

## 模板2： ##

**执行结果：**

![20190804180311721.png][]

## 模板3： ##

**执行结果：**

![20190804180943101.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/654f28e2737e4b7ca12e61d6fd971bf7.png
[Table]: http://www.hipenpal.com/tool/css_beautiful_table_templates_in_simplified_chinese.php
[20190804175908426.png]: /images/20210724/009694137ba2495f98a76b6a92054db0.png
[20190804180311721.png]: /images/20210724/f71c4da4553746e0b3ffe6b2272899e4.png
[20190804180943101.png]: /images/20210724/8f0e1af355304ba3b09bbcca065bd4c1.png