百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

HTML表格制作

bigegpt 2024-09-22 00:43 3 浏览

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

相关推荐

Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析

这篇文章是关于Dify「模板转换」节点的终极指南，解析了基于Jinja2模板引擎的动态文本生成技巧，涵盖多源文本整合、知识检索结构化、动态API构建及个性化内容生成等六大应用场景，助力开发者高效利用模...

我用C#造了个AI程序员:自动调试+重构代码实战

在软件开发的世界里，调试和重构代码往往占据了程序员大量的时间。我一直梦想着能有一个智能助手，帮我处理这些繁琐的工作。于是，我决定用C#打造一个AI程序员，让它具备自动调试和重构代码的能力。系统架构设计...

公文自动排版vba代码（公文自动排版vba代码）

Sub公文自动排版()'设置页面参数（单位：厘米）WithActiveDocument.PageSetup.TopMargin=CentimetersToPoints(3.7)&#...

Anthropic最强代码神器:Claude Code系统提示词

最近，在融合Opus-4之后，ClaudeCode的整体能力直线飙升.甚至一度把曾经的最强开发工具——Cursor打的抬不起头来。无论是代码生成的准确度，还是智能补全的丝滑体验，都让人印象深...

使用 Ruff 进行 Python 代码格式化与静态检查

随着Python项目的规模增大，保持一致的代码风格和高质量的代码变得尤为重要。Ruff是一个现代、高性能、支持lint和格式化的Python工具，能帮助你快速发现并修复常见代码问题。本文...

基础语法篇:格式化输出 含完整示例代码

所谓格式化输出就是按照一定格式来输出对应的内容，在Python的语法中格式化输出包含两种：格式化符号、格式化字符串一、格式化符号常用的格式化符号包括%s（将内容转换为字符串，放入占位位置）、%d（将内...

代码整洁如诗!Keil 插件上线，一键格式化代码，告别风格混乱!

引言：代码格式不统一？你的团队还在为“括号位置”吵架吗？嵌入式开发者们，你是否经历过这些抓狂瞬间？代码风格“百花齐放”：同事的代码缩进用空格，你的用Tab，合并时冲突频发！手动调整耗时费力：为了通过C...

[信捷PLC] 信捷PLC之C函数编程(一)

前言写PLC程序，越来越觉得结构化文本编程语言（ST）给PC编程带来的便利，在处理一些数据上，可以写的更加灵活。所以，在项目PLC选型上，我都会优先选择支持结构化文本的PLC。国内有些厂商推出了一些较...

C语言-HelloWorld解析（c语言的helloworld怎么写）

使用VisualStudio2017开发工具新创建一个项目，编写第一个C语言程序。#include<stdio.h>voidmain(){printf("HelloW...

VSCode 配置 C++ 开发环境!教程详解

第一步、安装VSCode应用程序打开VSCode官网，下载对应安装包并默认安装(这里指明：安装路径可以修改)第二步、安装相关插件此时的VSCode仅仅是一个英文文本编辑器，还称不上开发工具，所以需要...

C语言进阶教程:C语言与汇编语言交互

C语言和汇编语言的交互是底层编程和性能优化中的一个重要方面。理解它们如何协同工作，可以帮助开发者更好地控制硬件、优化关键代码段以及理解编译器的行为。为什么需要在C语言中嵌入汇编？尽管C语言已经提供了相...

C语言如何处理平台相关代码（c语言的开发平台）

在进行跨平台C编程时，不可避免地会遇到需要针对不同操作系统或硬件架构编写特定代码的情况。C语言通过预处理器指令，特别是条件编译指令，为我们提供了处理平台相关代码的有效机制。最常用的就是利用预定义的宏（...

C语言:hello world（c语言helloworld代码）

环境:a.初学者建议用“啊哈C”，这款软件简单易装;b.devc.visualstdiod.Vc6.0第一行代码:#include<stdio.h>#<stdio.h&g...

C语言之编译器集合（编写c语言编译器）

C语言有多种不同的编译器，以下是常见的编译工具及其特点：一、主流C语言编译器1.GCC（GNUCompilerCollection）特点：开源、跨平台，支持多种语言（C、C++、Fortran...

适合零基础初学者学习C语言第一课教程，揭开C语言的神秘面纱

一、C语言简介我刚接触编程，首先想要学习的就是C语言，这次我就把我的感悟用我自己理解的文字表述出来，这样对刚学C语言的人来说，才是比较友好的。因为我们都没有C语言的基础，不懂啥是编程，啥事代码。我们...

一周热门
最近发表
标签列表