HTML之CSS表格&lt;一&gt;

SS 表格属性可以帮助您极大地改善表格的外观。

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的红色边框：

table,th,td｛border: 1px solid red;}

（1）编辑代码

打开记事本，在<body>标签中加入以下代码，并保存为HTML格式文件。代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table{border-collapse: collapse;}

table,td,th{border: 1px solid red;}

（1）编辑代码

打开记事本，在<body>标签中加入以下代码，并保存为HTML格式文件。代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。

Table 属性

数据密集型文档和网页中，复杂表格结构是必不可少的。它们帮助用户理解大量的信息和数据关系。本文将详细介绍复杂表格的设计要点，提供实用的例子，并展示如何使用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>

最佳实践

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

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

.表格的制作

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>

<title>计算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</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>

</head>

<body>

</ul>

</ol>

<dl>

<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>

</head>

<body>

<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 文本域—富文本编辑器

在线咨询

上一篇：教你把电脑浏览器上的收藏夹导入到iPhone的Safari上
下一篇：HTML5文档头部相关标签怎样使用？

您的项目需求

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

整合营销服务商

HTML之CSS表格&amp;lt;一&amp;gt;

表格边框

折叠边框

Table 属性

复杂表格的设计要点

1. 清晰的层次结构

2. 一致的对齐

3. 合理的分隔

4. 简洁的标注

表格实例与HTML代码

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

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

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

最佳实践

您的项目需求

HTML之CSS表格<一>