HTML之Table表单的属性以及用法

不念不忘少年蓝@ 2022-05-28 02:23 127阅读 0赞

一、表格的常用属性

（1）table的常用属性

1.width、height  定义表格的长和宽

2.align   是整个表格相对于父元素的对齐方式

3.border   整个表格外围的的边界宽度

4.cellspacing   单元格外边距，即单元格之间的间距   默认不为0

5.cellpadding   单元格内边距，即单元格中的内容与边界的距离

6.bgcolor   背景颜色

（2）tr标签的常用属性

1.align   该行的内容，水平对齐方式

2.valign   改行的内容，垂直对齐方式

3.bgcolor  每行的背景颜色

（3）td标签的常用属性

1.width

2.height

3.align

4.valign

5.bgcolor

6.colspan   合并水平单元格

7.rowspan   合并垂直单元格

（4）th标签  该标签的作用和td差不多，不同的是该标签中的内容是列的标题

（5）caption标签   该标签的作用就是给表格设置题目  直接使用<caption>标题名称</caption>

（6）thead标签  表头

（7）tbody  表主题

（8）tfoot  表尾

ps：可以将表格整体分为三部分thead、tbody、tfoot，如果使用时不加以使用，则默认表格内容都在tbody该部分中

二、使用--------至多一个菜谱

<table align="center" width=400px cellspacing=0 cellpadding=3 border=1 height=180px>  
 <tr align="center"><td colspan=3>星期一菜谱</td></tr>  
 <tr align="center"><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒土豆</td></tr>  
         <tr align="center"><td>小葱豆腐</td><td>炒白菜</td></tr>  
 <tr align="center"><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>油焖大虾</td></tr>  
<tr align="center"><td>海参鲍鱼</td><td>宫保鸡丁</td></tr>  
</table>

说明：

table标签里面的属性：创建一个高为180，宽为400，边界线大小为1，表内单元格间的间距为0，单元格和单元格内部的内容的间距为3的一个表格，并且表格相对于父元素居中对齐

tr标签的属性：每行数据内容都居中对齐

td标签的属性：colspan=3该属性可以使得该单元格占用原来水平三个单元格的大小位置，rowspan=2该属性可以使得该单元格占用原来垂直单元格俩个位置大小

效果图：

![70][]

ps：1.如果不设置是表格整个的高度，，那每行数据上下之间显得挤压，因为不设置就是自适应，只要把内容正好显示出来，当然要想改变行高也不止改变表格高度这个唯一方法，还有很多方法，只是在则例说一下自适应的问题

[70]: /images/20220528/b2bee6aeeb324988a922247ae3a812eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML之表单

表单是什么，表格和单元格组成？我觉得这样理解有误。其实表单在互联网这个时代无处不在。

骑猪看日落/ 2024年05月05日 06:52/ 0 赞/ 76 阅读

相关 HTML5新增表单属性（HTML5）

HTML5新增表单属性（HTML5） <!DOCTYPE html> <html lang="en"> <head> <

梦里梦外;/ 2023年10月03日 13:31/ 0 赞/ 29 阅读

相关 html5表单属性_了解HTML5表单属性（第2部分）

html5表单属性 The following is an extract from our book, [HTML5 & CSS3 for the Real World,

阳光穿透心脏的1/2处/ 2022年12月03日 09:57/ 0 赞/ 236 阅读

相关 html语言form,HTML中form表单的用法

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？ form表单的作用 form标签用于为用户输入创建HTML表单，并向服务器传输用户输入的数据常用

ゝ一纸荒年。/ 2022年10月06日 07:54/ 0 赞/ 228 阅读

相关 HTML5表单属性

1.`<form> <input> autocomplete`属性 form或input应该有用自动完成的功能。当用户在自动完成域开始输入时，浏览器应该在该域中显示填写的选

偏执的太偏执、/ 2022年09月21日 01:38/ 0 赞/ 37 阅读

相关 HTML表单元素常见用法

最近更新时间：2018年6月20日11:40:38 [《我的博客地图》][Link 1] 在最开始做前端开发的过程中，对于表单元素的HTML标签的语义化概念很

本是古典何须时尚/ 2022年07月13日 09:25/ 0 赞/ 149 阅读

相关前端知识之HTML-----form------from表单属性

form即为表单，是一个专门让用户输入数据或者选择的一个组件。格式： <form> 记住，所有表单内容都要写在表单里面 </form

傷城~/ 2022年06月08日 02:50/ 0 赞/ 258 阅读

相关 HTML之Table表单的属性以及用法

一、表格的常用属性（1）table的常用属性 1.width、height 定义表格的长和宽 2.align 是整个表格相对于父元素的对齐方式 3

不念不忘少年蓝@/ 2022年05月28日 02:23/ 0 赞/ 128 阅读

相关 HTML||表单的属性和创建

表单：表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(c

àì夳堔傛蜴生んèń/ 2021年11月04日 13:12/ 0 赞/ 413 阅读

相关 HTML5新增的标签属性以及它们的用法

HTML5新增了一些标签，但它们并不像我们想象的那样陌生，它们只是更加符合我们的思维方式，更人性化。按照以往的布局方式，我们要划分页面结构时都是使用的div，例如`<div c

待我称王封你为后i/ 2021年09月18日 03:08/ 0 赞/ 625 阅读