使用HTML添加表格1（基本元素）-零基础自学网页制作

格元素详解与练习

提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。

在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：

今天我们就来学习一下如何向页面中添加表格元素。

首先来介绍一下表格元素中的基本标签。

NO.1：<table></table>

这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。

NO.2：<caption></caption>

这个标签是表格的标题标签。

NO.3：<tr></tr>

这个标签定义表格的列标签。

NO.4：<th></th>

这个标签是列表标题标签，例如，男生、女士、姓名等。

NO.5：<td></td>

这个标签定义表格的行标签。

OK，这些基本标签就可以构建一个基础的表格元素。示例代码如下：

页面效果如图所示：没有表格的外边框。

如何添加外边框呢？在<table>标签中修改border属性即可，示例代码如下：border="1"是给表格添加宽为1的边界线。

<table border = "1"><!-- border="1"是给表格添加宽为1的边界线 -->

效果如图所示：

这时，您会发现表格在页面上的尺寸非常小，可不可以按照页面尺寸来显示表格吗？当然可以，这就需要为<table>标签修改第二个属性width，示例代码如图所示：width = "100%"指的是表格宽度与平面宽度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格宽度与平面宽度一致 -->

效果如图所示：

ok！今天的讲解先到这里，明天我会继续为大家讲解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三个标签，以及合并单元格操作。

今天的完整代码示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body><h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格标题</caption>
<tr>
  <th>姓名</th>
<th>年龄</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所谓万丈高楼平地起，html技术虽然简单，但是内容相对繁琐，也是以后进一步学习网页制作的基础，希望大家动手写每一段代码，把每一步踩坚实。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

绍

我们都知道普通的HTML自带的功能相对有限，很多复杂的交互式场景，如果手动去写功能的话会非常的复杂，而且可扩展性差，就拿HTML表格来说，对于初学者或者对于复杂的拖拽式交互编程不熟悉的话会很浪费时间，因此今天就介绍一个第三方的插件——Table-draagger，来轻松实现类似的功能。Table-draagger是用于构建可重排序的拖放表的极简主义纯Javascript库！

Github

https://github.com/sindu12jun/table-dragger

特征

Table-draagger因为其以下几个特征而让拖拽和排序的实现变得如此简单：

非常容易配置
能够同时对列或行进行排序
排序时动画流畅
没有臃肿的依赖
提供触摸事件（意味着在触摸设备可以实现一些你想要的功能）

安装使用

安装

可以在npm上获得它：

npm install table-dragger --save

或者引用压缩的js文件

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

或者尝试开发中的不稳定版本

npm install table-dragger@next --save

快速入门

请看以下代码：

import tableDragger from 'table-dragger'
tableDragger(el, options?)

<table id="table">
<thead>
<tr>
<th class='handle'>header1</th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
</tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});

你可以在不设置任何参数的情况下使用默认的拖拽和排序方式，当然以下是你可以配置的选项：

options.mode

1、将mode设置为column，用户拖动和排序表的列

2、将mode设置为row，用户拖动并排序表的行

3、设置mode为free，用户根据点击后鼠标移动的方向拖动行或列。注意，必须在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖动句柄选择器默认情况下，在列模式下，dragHandler是表的第一行；在行模式下，则是第一列。

options.onlyBody

在行模式下将onlyBody设置为true时，用户只能在tbody中提升行。

下面是返回对象的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', () => {
console.log('drag');
})
.on('drop', (from, to, el, mode) => {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode) => {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode) => {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});

总结

Table-draagger为我们节省了很多手动封装表格排序和拖拽功能的时间，当然目前很多第三方框架已经实现了类似的功能，这更适用于原生的html表格，你还可以通过一些手段记忆用户拖拽，这只是其中一种思路，Enjoy it！~

数据密集型文档和网页中，复杂表格结构是必不可少的。它们帮助用户理解大量的信息和数据关系。本文将详细介绍复杂表格的设计要点，提供实用的例子，并展示如何使用HTML代码来创建这些表格。

复杂表格的设计要点

1. 清晰的层次结构

复杂表格应该有明确的层次结构，以便用户可以轻松地从总体到细节地阅读信息。这通常通过使用标题行和列来实现。

2. 一致的对齐

数据应该根据其类型进行对齐，例如，数字通常右对齐以便于比较，而文本则左对齐。

3. 合理的分隔

使用边框和底色来区分不同的行和列，以增强可读性。

4. 简洁的标注

对于包含复杂数据的表格，应该提供清晰的标注和脚注，以便用户理解数据的来源和含义。

表格实例与HTML代码

实例 1: 带有合并单元格的表格

这个表格显示了一个团队成员在上半年和下半年的表现评估。

<table border="1">
  <thead>
    <tr>
      <th rowspan="2">成员</th>
      <th colspan="2">上半年</th>
      <th colspan="2">下半年</th>
    </tr>
    <tr>
      <th>项目1</th>
      <th>项目2</th>
      <th>项目1</th>
      <th>项目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>良好</td>
      <td>优秀</td>
      <td>优秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>优秀</td>
    </tr>
  </tbody>
</table>

实例 2: 带有子标题的复杂表格

这个表格显示了一个公司季度财务报告的简化版本。

<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th></th>
      <th>Q2</th>
      <th></th>
      <th>Q3</th>
      <th></th>
      <th>Q4</th>
      <th></th>
    </tr>
    <tr>
      <th>财务报告</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年</td>
      <td>50</td>
      <td>30</td>
      <td>70</td>
      <td>40</td>
      <td>60</td>
      <td>50</td>
      <td>80</td>
      <td>60</td>
    </tr>
    <tr>
      <td>2021年</td>
      <td>55</td>
      <td>35</td>
      <td>75</td>
      <td>45</td>
      <td>65</td>
      <td>55</td>
      <td>85</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

实例 3: 具有行跨度的表格

这个表格展示了不同设备对于特定功能的支持程度。

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的设备</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">视频播放</td>
      <td>手机</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>电脑</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音频播放</td>
      <td>手机</td>
      <td>高</td>
    </tr>
    <tr>
      <td>智能音箱</td>
      <td>高</td>
    </tr>
    <tr>
      <td rowspan="2">文档编辑</td>
      <td>电脑</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>中</td>
    </tr>
  </tbody>
</table>

最佳实践

简化设计：避免使用过多的装饰性元素，如阴影或渐变。
数据可比性：确保相似性质的数据在表格中是可比较的。
注释和说明：在表格下方提供必要的注释和数据来源说明。
测试：在不同的设备和屏幕尺寸上测试表格的显示效果。

复杂表格结构是展示和理解多维数据的强大工具。通过遵循上述设计原则和实例，你可以创建清晰、有效的表格来提高你的数据呈现能力。

在线咨询

上一篇：H5游戏,专业H5游戏开发,H5小游戏定制,休闲H5游戏
下一篇：最全11种方法 css隐藏页面元素思路不一样，不一定要隐藏

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商