#今日说码栏目#第三集 table表格属性、表格合并、表单标签

已于 2022-07-11 11:24:48 修改
阅读量141 收藏
点赞数
文章标签： html 前端
于 2022-07-07 20:54:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abner_/article/details/125645685
版权
本文详细介绍了HTML中的table属性，包括width、height、border等，以及tr和td的属性，如align、valign等，并展示了如何实现单元格的合并。此外，还讲解了表单标签的使用，如input类型的text、password和submit，以及form的method和action属性，帮助读者理解如何创建可交互的表单。
摘要由CSDN通过智能技术生成

1、table表格基础

格式如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <!--指的是一行-->>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

</body>

</html>

表格<table></table>属性：

   1.宽度：width

    2.高度：height

    3.边框：border

    4.边框颜色：bordercolor

    5.背景颜色：bgcolor

    6.水平对齐：align="left/right/center"

    7.cellspacing="单元格与单元格之间的间隙"

    8.cellpadding="单元格与内容之间的空隙"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="50%" height="500px" align="right" bordercolor="red" bgcolor="yellow" cellspacing="20">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
<!--
    1.宽度：width
    2.高度：height
    3.边框：border
    4.边框颜色：bordercolor
    5.背景颜色：bgcolor
    6.水平对齐：align="left/right/center"
    7.cellspacing="单元格与单元格之间的间隙"
    8.cellpadding="单元格与内容之间的空隙"
-->>

</html>

对于table表格的话，主要需要掌握其属性的使用

tr属性表格<tr></tr>属性：

1、高度：height

2、背景颜色：bgcolor

3、文字水平对齐：align="left/right/center"

4、文字垂直对齐：valign="top/middle/bottom"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="50" align="center" bordercolor="purple" bgcolor="grey" cellspacing="50" cellpadding="100">
        <tr bgcolor="pink">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

如下图1所示： 

 图1

在单元格里，有上下方向的调整，为属性(valign="top/middle/bottom")

比如将“云想衣裳花想容”放在第一个单元格的居中位置，将“春风拂槛露华”放在第二个单元格的顶部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="500" align="center" bordercolor="purple" bgcolor="grey">
        <tr bgcolor="" height="260" align="center" valign="top">
            <td bgcolor="#57FEFF" valign="middle">云想衣裳花想容</td>
            <td BGCOLOR="#E77471" valign="top">春风拂槛露华浓</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

如下图2所示：

单元格td属性：

1、宽度：width=""

2、高度：height=""

3、背景颜色：bgcolor=""

4、文字水平对齐：align="left/right/center"

5、文字垂直对齐：valign="top/middle/bottom"

比如我想要将"@Web"这个内容放在第四个单元格的右上角，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--如果设置一个单元格的宽度，影响的是一整列单元格的宽度
        如果设置一个单元格的高度，影响的是一整行单元格的高度-->
    <table border="1" width="500" height="500" align="center" bordercolor="purple" bgcolor="grey">
         <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td align="right" valign="top" bgcolor="#F660AB">@Web</td>
        </tr>
    </table>
</body>

如下图3所示：

 图3

表格合并

colspan="列合并的数值"

rowspan="行合并的数值"

浅制作一个简单的五行四列的表格，但是还不能进行输入操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--如果设置一个单元格的宽度，影响的是一整列单元格的宽度
        如果设置一个单元格的高度，影响的是一整行单元格的高度-->
   <table border="1" width="500" height="500" bordercolor="pink" bgcolor="#E0FFFF" align="center" cellspacing="0" cellpadding="2">
    <tr>
        <td width="100" align="center" valign="middle">会员姓名</td>
        <td width="150"></td>
        <td width="100" align="center" valign="middle">出生日期</td>
        <td width="150"></td>
    </tr>
    <tr>
        <td width="100" align="center" valign="middle">身份证号</td>
        <td colspan="3"></td>
        <!-- <td>空</td> -->
        <!-- <td>空</td> -->
    </tr>
    <tr>
        <td width="100" align="center" valign="middle">通信地址</td>
        <td colspan="3"></td>
        <!-- <td>空</td> -->
        <!-- <td>空</td> -->
    </tr>
    <tr>
        <td width="100" align="center" valign="middle">联系电话</td>
        <td colspan="3"></td>
        <!-- <td>空</td> -->
        <!-- <td>空</td> -->
    </tr>
    <tr>
        <td width="100" align="center" valign="middle">会员卡号</td>
        <td colspan="3"></td>
        <!-- <td>空</td> -->
        <!-- <td>空</td> -->
    </tr>
   </table>
</body>
</html>

如下图4所示：

 图4

表单标签（上面是做出一个表格的样子，但是不能输入，以下是可以输入的代码）

<form method="get或者post" action="向何处发送这个表单即是地址">

<input type="text" >文本框

<input type="password" >密码框

<input type="submit" >提交框(注:<button></button>)

<input type="reset">清空效果

<input type="text" placeholder="想对使用者说的提示语句" name="提交表单的数据" value=""（属性）>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http://www.baidu.com" method="get">
        用户信息：<input type="text" placeholder="请输入您的用户名，注意大小写" name="username">
        <br />
        密码：<input type="password" placeholder="请输入您的密码" name="password">
        <br />
        <!-- 提交 <input type="submit"> -->
        <button type="submit"> 登录</button>
        <button type="reset">重新输入</button>
        <input type="button" value="验证">
    </form>
</body>

</html>

效果如下图5

图5

(注：<input type="submit" value="登录">相当于<button type="submit" >登录</button>

同理：<input type="reset" value="重置">相当于<button type="reset" >登录</button>)

房东的_猪
关注
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格使用单元格合并，网上调查返现CSS display:table实现的table表格，没有单元格的属性和样式，经过一番思考，曲折现实了单元格的合并，即采用正行嵌套一个单独的...
HTML表格（table）属性--左右（colspan）、上下（rowspan）合并、合并边框、位置 部分内容
热门推荐
咖啡味的小认真
08-09 1万+
border-collapse: collapse; rowspan="2" colspan="2" <html> <head> <meta charset="utf-8"> <title>商务风格表格的设计与实现</title> <style> /*设置表格总体样式*/ #rec...
table表格按列合并相同数据行单元格代码
07-13
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。
关于表格table嵌套,边框合并问题的解决方法
09-28
总的来说，处理表格table嵌套和边框合并的关键在于理解边框的渲染规则，并合理利用CSS属性进行调整。在实际应用中，还需要考虑到不同浏览器之间的兼容性问题，可能需要使用浏览器前缀或者采用更兼容的CSS写法。通过...
table-rowspan表格自动合并单元格插件
11-07
3. **单元格合并**：在网页开发中，如果需要将多个相邻的单元格合并成一个大单元格，可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似，但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...
elementUI table表格动态合并的示例代码
10-17
主要介绍了elementUI table表格动态合并的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 755
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
一七五、HTML 不同类型的事件及其说明和示例
梅某某
11-07 726
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
HTML和CSS 介绍
Zhao_0912的博客
11-04 1047
HTML 是一种用于创建网页的标准标记语言。它由一系列的元素组成，这些元素通过标签表示，用于描述网页的结构和内容。CSS 是一种用于描述 HTML 文档样式的样式表语言。它用于控制网页的布局、颜色、字体、间距等视觉效果。HTML：用于定义网页的结构和内容，通过标签组织信息，提供多媒体支持和用户交互功能。CSS：用于控制网页的样式和布局，通过丰富的样式属性和选择器，实现美观的视觉效果和灵活的布局，支持响应式设计和交互效果。结合 HTML 和 CSS，开发者可以创建出结构清晰、视觉美观、用户体验良好的网页。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 542
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
常见前端代码分析面试题Javascript|html
警警的博客
11-08 341
html\CSS\Javascript
CSS:基础选择器,文字控制属性(HTML)
m0_75035023的博客
11-04 357
CSS:基础选择器,文字控制属性(HTML),javaweb
W3C HTML 活动
wjs2024的博客
11-08 150
W3C于2008年1月22日发布了HTML 5的工作草案。W3C不仅推动了HTML语言的发展，也促进了Web技术的标准化和普及【7†source】【8†source】【9†source】。这个版本在HTML 2.0的基础上增加了许多广泛使用的特性，如字体、表格、applets、围绕图像的文本流、上标和下标等。它是HTML的早期版本，但目前已不再使用，因为现有的浏览器都依赖于更新的HTML版本。关于W3C（万维网联盟）的HTML活动，我们可以从HTML的不同版本的发展历程中了解其主要的活跃时期和贡献。
html的week控件 获取周(星期)的第一天(周一)和最后一天(周日)
最新发布
代码笔记
11-08 63
html的week控件 获取周(星期)的第一天(周一)和最后一天(周日)
HTML静态网页成品作业(HTML+CSS)——阜阳剪纸介绍设计制作(1个页面)
yxhxhxbxvbchsw的博客
11-08 81
HTML静态网页成品作业(HTML+CSS)——阜阳剪纸介绍设计制作(1个页面)
浏览器漫谈-HTML--（1）从“头“看[HTML]
m0_74117421的博客
11-08 430
这一个专栏我们会从简单的html结构讲起，讲到它的设计思路，以及他是如何在浏览器中发挥作用的。最后，我们会拿出来几个做到比较有意思的html详细剖析一下它的实现原理，使用到了哪些技术。
HTML&CSS： 实现可爱的冰墩墩
weixin_52814911的博客
11-08 166
HTML&CSS： 实现可爱的冰墩墩。
python爬虫自动库DrissionPage保存网页快照mhtml/pdf/全局截图/打印机另存pdf
十一姐的博客
11-08 166
三种保存快照的方法，分别是保存pdf、保存mhtml文件、保存全局截图，具体看网页加载情况可以设置滚动到底部再进行如下操作等
CSS display属性实现表格布局：单元格合并技巧
"CSS display属性的table表格布局" 在网页设计中，CSS的`display`属性是一个至关重要的属性，它用于定义元素的渲染方式。在处理表格布局时，`display`属性可以模拟HTML的表格元素行为，使得非表格元素如`div`也能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值