盘点各类表格格式样本合集

一、基础表格

基础表格是最常见的表格之一，一般用于展示简单的数据信息，通常只有行列的基本信息，没有太多的样式效果。其HTML代码如下：

<table>
   <tr>
       <th>项目1</th>
       <th>项目2</th>
       <th>项目3</th>
   </tr>
   <tr>
       <td>内容1</td>
       <td>内容2</td>
       <td>内容3</td>
   </tr>
</table>

在表格中，<th>标签用于定义表头单元格，<td> 标签用于定义数据单元格。该表格的排版效果如下：

二、响应式表格

随着移动设备使用的普及，响应式表格成为了越来越流行的选择。它能够自适应不同的屏幕大小，并显示不同数量的列。下列HTML代码实现了一个响应式表格。

<div class=\"table-wrapper\">
   <table class=\"fl-table\">
       <thead>
           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>性别</th>
               <th>手机号</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td data-label=\"姓名\">小明</td>
               <td data-label=\"年龄\">20</td>
               <td data-label=\"性别\">男</td>
               <td data-label=\"手机号\">123456789</td>
           </tr>
           <tr>
               <td data-label=\"姓名\">小红</td>
               <td data-label=\"年龄\">29</td>
               <td data-label=\"性别\">女</td>
               <td data-label=\"手机号\">987654321</td>
           </tr>
       </tbody>
   </table>
</div>

在这个表格中，我们使用了div标签来包装table标签，添加class=\"table-wrapper\"。并且我们增加了一个新的属性data-label用于标注单元格内容所属的列信息，以适应响应式表格在移动设备中的呈现。该表格的排版效果如下：

三、复杂表格

有时，我们需要展示更加复杂的数据结构，这时可以使用表格中嵌套表格的方式来实现，以下HTML代码定义了一份复杂的表格：

<table class=\"tg\">
   <tr>
       <th class=\"tg-0pky\" rowspan=\"2\">大类1</th>
       <th class=\"tg-0lax\">项目1</th>
       <td class=\"tg-c3ow\">   内容1-1</td>
       <td class=\"tg-c3ow\">   内容1-2</td>
   </tr>
   <tr>
       <th class=\"tg-0lax\">项目2</th>
       <td class=\"tg-c3ow\">   内容2-1</td>
       <td class=\"tg-c3ow\">   内容2-2</td>
   </tr>
   <tr>
       <th class=\"tg-0pky\" rowspan=\"2\">大类2</th>
       <th class=\"tg-0lax\">项目3</th>
       <td class=\"tg-c3ow\">   内容3-1</td>
       <td class=\"tg-c3ow\">   内容3-2</td>
   </tr>
   <tr>
       <th class=\"tg-0lax\">项目4</th>
       <td class=\"tg-c3ow\" colspan=\"2\">
            <table class=\"inside-table\">
                <tr>
                    <td>内容4-1</td>
                    <td>内容4-2</td>
                    <td>内容4-3</td>
                </tr>
                <tr>
                    <td colspan=\"3\">内容4-4的描述</td>
                </tr>
            </table>
       </td>
   </tr>
</table>

这个表格中，我们设置了rowspan属性和colspan属性来处理单元格跨度问题。并且嵌套了一个内部表格来完善该表格的数据结构。该表格的排版效果如下：

总结

表格作为一种重要的数据展示和处理方式，在网页设计中扮演了不可替代的角色。通过今天的介绍，我们可以学到如何使用基础表格、响应式表格、以及复杂表格的HTML代码来构建符合业务需求的表格样式。为各位网页设计师提供了新的工具和思路，帮助你更加高效地构建网页。