12.HTML创建和格式化表格

格是组织和显示数据的一种有效方式，无论是在文档中还是网页上。良好的表格设计可以提高信息的可读性和易理解性。本文将详细介绍如何创建和格式化表格，并提供一些实例。

创建表格

在Word或类似文档编辑器中创建表格

插入表格：打开文档编辑器，例如Microsoft Word，找到“插入”选项卡，点击“表格”，选择需要的行数和列数。
输入数据：点击表格中的单元格，开始输入数据。可以使用Tab键在单元格之间跳转。
调整行列：根据需要调整行高和列宽。在Word中，可以通过拖动表格边框来调整，或者点击右键选择“表格属性”进行精确设置。

在HTML中创建表格

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

<table> 标签用于创建表格。
<tr> 标签定义表格中的行。
<th> 标签定义表头单元格，通常加粗居中显示。
<td> 标签定义标准单元格。

格式化表格

格式化表格包括调整表格的样式、布局和颜色等，以提高其可读性和美观性。

文档编辑器中的格式化

边框样式：可以为表格或单个单元格设置边框样式、颜色和宽度。在Word中，选择表格，然后在“设计”选项卡中选择边框样式。
单元格填充：为了区分不同的行或列，可以对单元格进行颜色填充。在Word中，选择单元格或行列，然后在“布局”选项卡中选择“填充”。
文本对齐：文本对齐方式可以设置为左对齐、居中或右对齐。选择单元格后，在“布局”选项卡中选择对齐方式。
合并单元格：有时需要将多个单元格合并为一个单元格以显示标题或其他信息。选择要合并的单元格，然后点击“合并单元格”。

HTML中的格式化

在HTML中，格式化通常通过CSS完成。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

border-collapse 设置为 collapse 以消除单元格之间的间隙。
th, td 设置了边框、填充和文本对齐。
th 设置了表头的背景色。
tr:nth-child(even) 为偶数行设置了条纹效果。

实例

文档编辑器实例

假设我们需要创建一个3x3的表格，显示一个小型团队的成员信息。

插入一个3行3列的表格。
输入数据：姓名、职位、邮箱。
设置第一行为表头，加粗并填充淡蓝色背景。
设置所有单元格的文本为居中对齐。
为表格添加外边框，并为行添加细边框。

HTML实例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Developer</td>
    <td>bob@example.com</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>Designer</td>
    <td>charlie@example.com</td>
  </tr>
</table>

</body>
</html>

在这个HTML实例中，我们创建了一个带有条纹效果的表格，表头有绿色背景和白色文字，每个单元格都有适当的填充和边框。

结论

创建和格式化表格是一项基本技能，无论是在文档编辑器还是HTML中。一个良好格式化的表格不仅能有效传达信息，还能提升整体文档或网页的美观性和专业性。通过实践这些技巧和使用示例作为参考，你可以创建出既实用又吸引人的表格。

、统计图表ECharts

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

主页：http://echarts.baidu.com/

2、弹窗/层 Layer

layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性。layer兼容了包括IE6在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。

layer遵循LGPL协议，将永久性提供无偿服务。历经数年，截至到2016年09月12日，已运用在20万余家web平台，其中包括中国联通、蚂蚁短租、慕课网、phpyun等等知名网站。

主页：http://layer.layui.com/

3、日期选择 LayDate

你是时候换一款日期控件了，而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善的皮肤体系，并且完全开源，你可以任意获取开发版源代码，一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求，延续了layui一贯的简单与易用。她遵循LGPL协议，您可以免费将她用于任何个人项目。

layDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，快捷键操作等常规功能外，还拥有更多趋近完美的解决方案。

主页：http://laydate.layui.com/

4、表单验证jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。

主页：https://jqueryvalidation.org/

5、表单向导jquery-steps

jquery-steps是一个聪明的UI组件，它允许您轻松地创建精灵般的接口。这个插件组成部分内容更有条理，有序的页面视图。此外，它很简单，jQuery验证可以防止步改变或提交。

支持HTML5和交互方法，异步（AJAX）内容加载，容易表单验证，嵌入式iframe内容，清爽的过渡效果，键盘导航，简单的步骤操作，在一个页面中的多个向导，轻松导航，状态持久性。

主页：http://www.jquery-steps.com/

6、文件上传Web Uploader

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。

头条号这里就是采用了这款图片上传插件。

主页：http://fex.baidu.com/webuploader/

7、图标库阿里巴巴矢量图标库

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。

主页：http://www.iconfont.cn/

8、树形菜单jsTree

jsTree是一个基于jQuery的Tree控件。支持 XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。

主页：https://www.jstree.com/

9、表格Bootstrap table

Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见其受欢迎程度。

支持 Bootstrap 3 和 Bootstrap 2
自适应界面
固定表头
非常丰富的配置参数
直接通过标签使用
显示/隐藏列
显示/隐藏表头
通过 AJAX 获取 JSON 格式的数据
支持排序
格式化表格
支持单选或者多选
强大的分页功能
支持卡片视图
支持多语言
支持插件

主页：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

10、CSS动画Animation.css

Animation.css是一个迷人的动画库，它提供了一堆很酷的，有趣的，跨浏览器的动画，你可以在项目中调用它们。

主页：https://daneden.github.io/animate.css/

限于篇幅，这次只介绍这10款，说是介绍，其实只是抛砖引玉而已，具体的用法我没有附上，其实任何一个库或者控件插件类的，看官方文档是最佳的使用方式，如果有任何问题，请留言，谢谢

例

带有 <thead>、<tfoot> 和 <tbody> 元素的 HTML 表格：

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

浏览器支持

所有主流浏览器都支持 <thead> 标签。

标签定义及使用说明

<thead> 标签用于组合 HTML 表格的表头内容。

<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

提示和注释

注释：<thead> 元素内部必须包含一个或者多个 <tr> 标签。

提示：<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不再支持 HTML 4.01 中 <thead> 标签的任何属性。

属性

属性	值	描述
align	rightleftcenterjustifychar	HTML5 不支持。定义 <thead> 元素中内容的对齐方式。
char	character	HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。
charoff	number	HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。
valign	topmiddlebottombaseline	HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。

全局属性

<thead> 标签支持 HTML 的全局属性。

事件属性

<thead> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

您的项目需求

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

整合营销服务商

12.HTML创建和格式化表格

创建表格

在Word或类似文档编辑器中创建表格

在HTML中创建表格

格式化表格

文档编辑器中的格式化

HTML中的格式化

实例

文档编辑器实例

HTML实例

结论

您的项目需求