整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
可以使用 HTML 创建表格。
实例
表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
这个例子演示如何在 HTML 文档中创建表格。
表格边框
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>带有普通的边框：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有粗的边框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有很粗的边框：</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示各种类型的表格边框。
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示如下：
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
表格中的空单元格
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器中显示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 2
更多实例
没有边框的表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>这个表格没有边框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>这个表格也没有边框：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示一个没有边框的表格。
表格中的表头(Heading)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何显示表格表头。
空单元格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
<p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
<p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
<p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
</body>
</html>
[/demo]
本例展示如何使用 " " 处理没有内容的单元格。
带有标题的表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>这个表格有一个标题，以及粗边框：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 Cell spacing 增加单元格之间的距离。
向表格添加背景颜色或背景图像
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>背景颜色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景图像：</h4>
<table border="1"
background="./imagecopy1234567890/test.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何向表格添加背景。
向表格单元添加背景颜色或者背景图像
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>单元背景：</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="./imagecopy1234567890/test.gif">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何向一个或者更多表格单元添加背景。
在表格单元中排列内容
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">1.10</td>
<td align="right">.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">.00</td>
<td align="right">.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">0.40</td>
<td align="right">0.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">01.50</th>
<th align="right">4.65</th>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
表格标签
表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
页布局对网站的外观特别重要，布得好，留得住用户，增收流量；布不好，用户逃之夭夭，还顺道骂两句。大多数Web系统会借用杂志或报纸那样排版，至于为什么这样，我不说，你也懂的，就是产品经理吵架吵不过程序员时，常说的：用户教育成本低。
在HTML中，如果是数据集(像excel那种)的布局，常用<table>标签，如果是内容块(网站板块)的布局，则常用<div>标签。
表格由<table>标签来定义。每个表格均有若干行<tr>标签和列<td>标签组成。<td>数据单元格的内容可以包含文本、图片、水平线、表格等内容。表格头由<th>标签生成。<table>标签常用的属性是border，用来指定边框宽度。<th>和<td>的属性rowspan，可指定跨行数。
如果真的不理解表格的意义，那你打开excel，好好操作一翻，横向合并一下单元格就知道什么是跨行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第5个HTML-表格</title>
</head>
<body>
<table border="1">
<tr>
<th>序号</th>
<th>产品名称</th>
<th>编号</th>
<th>规格</th>
</tr>
<tr>
<td>1</td>
<td>平板电脑</td>
<td>P1010</td>
<td>9.7英尺</td>
</tr>
<tr>
<td>2</td>
<td>笔记本电脑</td>
<td>C2111</td>
<td>15英尺</td>
</tr>
</table>
</body>
</html>输出结果
网站分块布局，常用<div>标签进行定义。常见网站布局为上中下，上放导航栏，中间放内容，底部放版权和友情链接，而它们的分割便是由<div>标签负责的。当然，用<div>布局，需要CSS的支持才行。同表格<td>标签一样，<div>标签中，也是可以嵌入<p>、<hr>等标签的。
<div style="color:blue">
<h3>老陈说编程</h3>
<p>一个当了10年技术总监的老家伙，分享多年的编程经验。<br/>
想学编程的朋友，可关注：老陈说编程。<br/>
分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。</p>
</div>输出结果
好了，有关HTML布局的内容，老陈先讲这么多，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##Web##程序员##CSS##HTML5#
<html></html>双标签 开头结尾 HTML标签为最大的标签 称为根标签
<head></head> 文档头部标签 且必须设置title
<title></title> 页面标题
<body></body> 文档的主体 包含页面的内容
<h1>-<h6> HTML提供6个等级的页面标题 有大到小
<p></p> p标签用于定义段落 可以将页面分为若干个段落 根据窗口大小自动换行
<br/>单标签 换行标签 （break打断）
加粗 <strong></strong>or<b></b>
斜线 <em></em>or<i></i>
删除线 <del></del>or<s></s>
下划线 <ins></ins>or<u></u>
没有语义 属于一种盒子 来装内容
<div></div> 表示分割分区 用来布局 一行一个 大盒子
<span></span>意为跨度，跨距 一行可以哦有多个 小盒子
<img src="图像路径(url)"/> 定义页面中的图像
图像标签包含多个属性
src 图片路径 必须属性
alt 文本 替换文本 图像不能显示的文字
title 文本 鼠标放到图像上显示文字
width 像素 宽度
height 高度
border 边框
相对路径和绝对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
分类：下级路径/ 上级路径../
绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href用于指定链接目标的url地址(必须属性)
target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式
锚点链接：可以快速到页面某个位置
在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>
找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">目标</h3>
<!-- 注释语句 --> 快捷键CTRL + /
HTML 原代码 | 显示结果 | 描述 |
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
半个空白位 | ||
一个空白位 | ||
不断行的空白 |
<table></table> 是用于定义表格的标签
<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中
<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中
<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容
表头单元格标签：
<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。
表格属性：
align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框
cellpadding 像素值 规定单元边沿与其内容的空白，默认1像素
cellspacing 像素值 规定单元格直接的空白 默认2像素
with 像素值or百分比 规定表格的宽度
合并单元表格方式：
跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"
<ul>标签表示无序列表 里面只能包含li
<ol>有序标签 里面只能包含li
<li>相当于一个容器定义列表项 与<ui>or<li>嵌套使用 li里面可以包含任何标签
<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用
标签 | 描述 |
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签，一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> New | 指定一个预先定义的输入控件选项列表 |
<keygen> New | 定义了表单的密钥对生成器字段 |
<output> New | 定义一个计算结果 |
<input>标签用于收集用户信息 包含一个type属性 可以有多种样式
<input type="value">
<input type="属性值" />属性值：
button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮，供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
<label> 标签为 input 元素定义标注（标记）。 label是标注的意思
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同
详情可参考
https://www.runoob.com/ 菜鸟教程
https://www.w3school.com.cn/ w3c
*请认真填写需求信息，我们会在24小时内与您取得联系。
