HTML表格制作
1.表格的制作
1、表格元素–<table>
表格中的行–<tr>
表格中的列–<td>
表格中的表头–【居中/加粗】
table标记的边框–border
table标记的宽度–width
table标记的高度–height
table标记的水平对齐方式–align
table标记的表格背景色–bgcolor
table标记的表格边框色–bordercolor
table标记的表格中的内容与边框之间的距离–cellpadding
table标记的表格中的边框与边框之间的距离–cellspacing【默认是1px】
tr标记的align属性–设置当前行的水平对齐方式
tr标记的bgcolor属性–设置当前行的背景色
tr标记的valign属性–设置当前行的垂直对齐方式【top/middle/bottom】
td标记的align属性–设置当前列的水平对齐方式
td标记的bgcolor属性–设置当前列的背景色
td标记的valign属性–设置当前列的垂直对齐方式【top/middle/bottom】
合并单元格
水平方向合并单元格–跨列—colspan
- 垂直方向合并单元格–跨行—rowspan
- 删除多余的单元格*
以下是计算器的控制面板代码
<!DOCTYPE html>
<html>
<head>
<meta charset=\”utf-8\”>
<title>计算器的控制面板</title>
</head>
<body>
<table border=\”1\” cellspacing=\”10px\” cellpadding=\”20px\”
align=\”center\” bgcolor=\”aliceblue\”>
<tr><td colspan=\”5\” height=\”40px\” align=\”right\”><font size=\”7\”><b>0</b></font></td></tr>
<tr align=\”center\”>
<td>MC</td>
<td>MR</td>
<td>MS</td>
<td>M+</td>
<td>M-</td>
</tr>
<tr align=\”center\”>
<td><-</td>
<td>CE</td>
<td>C</td>
<td>+/-</td>
<td>√</td>
</tr>
<tr align=\”center\”>
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
<td>%</td>
</tr>
<tr align=\”center\”>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>1/x</td>
</tr>
<tr align=\”center\”>
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
<td rowspan=\”2\” bgcolor=\”yellow\”>=
</td>
</tr>
<tr align=\”center\”>
<td colspan=\”2\”>0</td>
<td>.</td>
<td>+</td>
</tr>
</table>
</body>
</html>
看成品:
2
2.1 有序列表
ol—有序列表
li—列表中的每一项【条目】
默认的标志是有顺序的数字
我们可以通过ol的type属性来修改标志
1–有顺序的数字
a–有顺序的小写字母
A–有顺序的大写字母
i–有顺序的小写罗马数字
I–有顺序的大写罗马数字
start属性设置书顺序的开始值
2.2 无序列表
ul—无序列表
li—列表中的每一项【条目】
默认的标志是实心点
我们可以通过ul的type属性来修改标志
circle–圆形【。】
disc—-实心点[默认]
square–正方形
none–没有标志
2.3 自定义列表
dl—自定义列表
dt—自定义列表的头
dd—子项目
以下是有序，无序，和自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset=\”utf-8\”>
<title>列表</title>
</head>
<body>
<ul type=\”none\”>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol type=\”A\”>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定义列表</dt>
<dt>自定义列表</dt>
<dt>自定义列表</dt>
</dl>
</body>
</html>
3. 表单<form>
主要负责采集信息的，可以将采集的信息提交。
form的属性
action—指定表单数据的后端处理程序
method—-指定表单数据的提交方式【get[默认]/post】
get提交数据会将被处理的数据跟随在请求地址之后
被提交的数据255个字符
https://www.baidu.com/s?&wd=html
post提交数据会将被处理的数据封装到http协议的头
https://www.baidu.com/s
被提交的数据没有限制
通常情况下提交文件只能用post
enctype属性规定在将表单数据发送到服务器之前如何对其进行编码。
<!DOCTYPE html>
<html>
<head>
<meta charset=\”utf-8\”>
<title></title>
</head>
<body>
<table border=\”1\” align=\”center\” cellpadding=\”20px\” cellspacing=\”0\”>
<tr>
<td>application/x-www-form-urlencoded</td>
<td>在发送前对所有字符进行编码（默认）。</td>
</tr>
<tr>
<td>multipart/form-data</td>
<td>不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
</td>
</tr>
<tr>
<td>text/plain</td>
<td>将空格转换为 \”+\” 符号，但不编码特殊字符。</td>
</tr>
</table>
</body>
</html>
表单元素
input 文本框/密码框/单选按钮/复选框…
seletc 下拉列表
textarea 文本域—富文本编辑器
Markdown表格合并
Markdown表格的语法如下：
显示效果如下：
我们可以:在第二行，也就是表头下面的一行，去规定它是左对齐，右对齐，或者是居中，分别是:-，-:，:-:，除此之外，就没有其他的控制的方式了，markdown对于表格的控制是比较弱的，比如说表格的合并，markdown自身就无能为力了，好在它支持html的语法，我们也可以实现表格的控制。
html之中，使用table作为表格
table表示表格，里面的元素有表头，行，单元格
th表示表头，tr表示行，td表示单元格
同一行的单元格要合并，那就是一个单元格，占多个单元格的位置，位置是span，就可以使用colspan = \”x\”，来表示所在的单元格占多少个格子。
同一列的单元格要合并，那就是一个单元格，占多行单元格的位置，位置是span，就可以使用rowspan = \”x\”，来表示所在的单元格占多少个列方向的单元格。
这个时候，就需要把colspan = \”x\”和rowspan = \”x\”，同时使用了，下面是二者没有关系的一种情况。
下面是二者之间相互关联的一种情况。
分析：主要是纵向的表格的合并，文字放置在表格的中间，表格头背景颜色设为粉红色，然后表头文字是红色。我们开始实现。
效果
1.先去处理第一列的单元格，占据3个单元格，整体的显示效果和代码如下：
2.然后处理第4列的两个单元格，也是纵向的，合并的单元格，会自动占据它所合并的方向的位置，相应的位置，计算的时候会在下一行或者相邻的列里面也计算在内，它下面的一个元素，自动跟在这个“隐藏元素”的后面。比如青云山，男这两个元素的位置，就体现了这个原则。整体的显示效果和代码如下：
3.然后我们实现居中，使用style，对于整个table设置，也可以对某个tr，或者某一个td使用，越小的控制，起作用的优先级越高，比如第2行，设置向右对齐，它的优先级高于整个table的设置。整体的显示效果和代码如下：
4.实现其他的表格合并的效果，整体的显示效果和代码如下：
5.填充数据
6.修改表头样式，仍然是使用style，修改背景色background-color，字体颜色color就可以了。
以上就是实战环节，完成了既定的目标的表格的单元格合并与样式的改造，over!
据说VLOOK可以，但是我测试了之后，不行，合并单元格功能无法正常使用。
如果你没有html基础，或者是觉得麻烦，或者是不太想去写表格，没关系，也有办法，直接生成，按照目标样式自定义去合并，设置样式，然后生成，拷贝到typora之中即可！！！方便快捷，省时省力！！！只需浏览器收藏url：https://www.tablesgenerator.com/html_tables，因为我们现在实现表格的合并，是通过html的语法来完成的，而tablesgenerator网站可以帮我们实现表格的合并，我们只需要复制其中的代码，然后即可。
生成table
html实现原生table并设置表格边框的两种方式
在 HTML 中，表格是展示结构化数据的重要工具。为了使表格更加清晰、美观，设置表格边框是常见的需求。本文将深入探讨 两种原生方式 来实现表格边框：使用 HTML 表格边框属性 和 CSS 样式设置。通过详细的代码示例和解释，您将全面掌握在 HTML 中创建带边框的表格的方法。
云服务器，高防服务器就选蓝易云，头条搜索：蓝易云
云服务器，高防服务器就选蓝易云，头条搜索：蓝易云
云服务器，高防服务器就选蓝易云，头条搜索：蓝易云
- 什么是 HTML 表格？
- 方式一：使用 HTML 表格边框属性示例代码与解释优缺点分析
- 方式二：使用 CSS 样式设置表格边框示例代码与解释优缺点分析
- 比较分析：HTML 属性 vs CSS 样式功能对比表应用场景分析
- 高级技巧与最佳实践响应式表格设计结合 CSS 框架提升表格美观度
- 常见问题与解决方案 ️
- 总结
HTML 表格用于在网页上展示结构化的数据，通过行（<tr>）和列（<td> 或 <th>）组织内容。表格广泛应用于数据展示、信息对比、日程安排等多种场景。为了增强表格的可读性和美观性，设置表格边框是基本且必要的操作。
基本结构示例：
在上述结构中，<table> 标签定义表格，<tr> 定义行，<th> 定义表头单元格，<td> 定义普通单元格。
HTML 提供了 border 属性，可以直接在 <table> 标签中设置表格的边框样式。这是一种 简便直观 的方法，适用于快速创建带边框的表格。
代码解析：
- <table border=\”1\”>：在 <table> 标签中添加 border=\”1\” 属性，设置表格边框为 1 像素 的实线。
- <th> 和 <td> 标签：分别用于定义表头和普通单元格。
运行效果：
通过 CSS，可以更灵活地控制表格边框的样式，包括线条类型、颜色、粗细等。此方法符合现代 Web 开发的最佳实践，推荐用于生产环境。
代码解析：
- <style> 标签：在 <head> 中添加 CSS 样式，用于控制表格外观。
- border-collapse: collapse;：合并表格边框，使表格看起来更加整洁。
- border: 2px solid #4CAF50;：设置表格、表头和单元格的边框为 2 像素 的 绿色实线。
- padding 和 text-align：设置单元格的内边距和文本对齐方式，提升表格的可读性。
- background-color: #f2f2f2;：为表头设置背景颜色，区分表头与内容。
运行效果：
在实现表格边框时，选择 HTML 属性 还是 CSS 样式 取决于具体需求和项目规范。以下从多个维度进行对比分析，帮助您做出最佳选择。
- 快速原型设计：如果需要快速创建一个简单的表格，且对样式要求不高，可以使用 HTML 的 border 属性。
- 生产环境与复杂样式需求：对于需要高度定制化、响应式设计以及良好代码维护性的项目，推荐使用 CSS 样式设置表格边框。
为了提升表格的美观度和用户体验，以下提供一些 高级技巧 和 最佳实践，帮助您在实际开发中更好地应用表格边框设置。
在移动设备上，表格可能因屏幕宽度限制而显示不全。通过 CSS 媒体查询，可以实现表格的响应式设计，确保在不同设备上均能良好显示。
示例代码：
代码解析：
- 媒体查询 @media (max-width: 600px)：当屏幕宽度小于或等于 600 像素时，应用响应式样式。
- display: block;：将表格元素转为块级元素，便于在小屏幕上垂直排列。
- td::before：使用伪元素在每个单元格前添加标签，增强可读性。
运行效果：
在大屏幕上，表格正常显示；在小屏幕上，表格转为块状布局，每个单元格前显示对应的标签，提升可读性。
借助 CSS 框架，如 Bootstrap，可以更快捷地创建美观且功能丰富的表格。框架提供了预定义的样式和组件，简化开发过程。⚙️
示例代码（使用 Bootstrap）：
代码解析：
- 引入 Bootstrap CSS：通过 CDN 链接引入 Bootstrap 样式。
- class=\”table table-bordered table-striped\”：使用 Bootstrap 提供的类名，快速应用表格边框和条纹样式。
- class=\”table-dark\”：设置表头为深色背景，增强视觉对比。
运行效果：
表格拥有统一且美观的边框、交替条纹背景以及响应式设计，提升整体用户体验。
在设置 HTML 表格边框时，可能会遇到一些常见问题。以下列出常见问题及其解决方法，帮助您高效排查和解决问题。
症状：在使用 HTML border 属性或 CSS 样式设置表格边框后，浏览器中表格依然没有边框显示。
解决方法：
- 检查 CSS 优先级：确认是否有其他 CSS 样式覆盖了表格边框设置。
- 验证 HTML 语法：确保 <table> 标签正确使用了 border 属性，且 CSS 选择器正确无误。
- 浏览器兼容性：尝试在不同浏览器中查看，确保问题不在特定浏览器上。
示例修正（CSS 优先级）：
症状：使用 CSS 设置的表格边框样式不统一，部分单元格边框缺失或样式不一致。
解决方法：
- 使用 border-collapse 属性：设置 border-collapse: collapse;，确保表格边框合并为单一边框。
- 统一边框设置：确保所有相关元素（table、th、td）均应用相同的边框样式。
示例修正：
症状：表格在小屏幕设备上显示不全，布局错乱。
解决方法：
- 实现响应式设计：使用 CSS 媒体查询调整表格布局。
- 使用滚动条：在容器中添加水平滚动条，确保表格在小屏幕上可水平滚动查看。
示例代码：
在 HTML 中实现带边框的原生表格，有 两种主要方式：使用 HTML 表格边框属性 和 CSS 样式设置。每种方法都有其适用场景和优势：
- HTML border 属性：适用于快速、简单的表格边框设置，操作直观，但样式控制有限。
- CSS 样式设置：提供更高的灵活性和可定制性，符合现代 Web 开发最佳实践，适用于需要复杂样式和响应式设计的项目。
关键要点回顾：
- HTML 表格边框属性：
- 使用 border 属性快速设置边框宽度。
- 简单易用，适合快速原型设计。
- CSS 样式设置：
- 使用 CSS 控制边框的颜色、样式、粗细等。
- 通过 border-collapse 实现边框合并。
- 支持响应式设计，提升用户体验。
- 比较分析：
- HTML 属性方法简单但功能有限，CSS 方法灵活且功能强大。
- CSS 方法符合分离内容与样式的最佳实践，便于维护和重用。
- 高级技巧：
- 结合媒体查询实现响应式表格设计。
- 使用 CSS 框架（如 Bootstrap）快速创建美观且功能丰富的表格。
最佳实践建议：
- 优先使用 CSS：在现代 Web 开发中，推荐使用 CSS 样式设置表格边框，确保样式与内容分离，提升代码可维护性。
- 实现响应式设计：确保表格在不同设备上均能良好显示，提升用户体验。
- 统一样式管理：通过外部 CSS 文件集中管理表格样式，便于维护和样式重用。
- 利用 CSS 框架：借助 CSS 框架的预定义样式，快速创建专业且美观的表格。
通过掌握上述方法和技巧，您将能够在 HTML 中高效地创建带有边框的原生表格，满足不同项目需求，提升网页的数据展示效果。
祝您在 Web 开发的道路上不断进步，创造出更加美观、功能丰富的网页表格！
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
