这是我参与「第四届青训营」笔记创作活动的第五天

HTML基础知识总结(五)

接上一篇文章，本章着重复习 Html 的基础内容，学习 Html 究竟要学些什么呢？主要是学习表单的属性、如何合并单元格以及表单的信息，来搭建网页的 “ 结构 ” 。

一、表格的属性

1.边框 `border`

表格是有边框属性的。

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格。

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

设置边框为1的表格。

2.`cellspacing`

设置单元格与单元格边框的空白间距：

3.`cellpadding`

设置单元格内容与单元格边框之间的空白间距：

(1)没有cellpadding

<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

(2)有cellpadding


<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

可以看到效果很明显。

4.`width`

设置表格的宽度

 <table align="center"  width="400" border="1" contenteditable="0">

设置表格的宽度是 400px

5.`height`

设置表格的高度

 <table align="center"  heigth="600" border="1" contenteditable="0">

设置表格的高度是 600px

6.`algin`

设置表格在网页中的水平对齐方式

二、合并单元格

合并的顺序我们按照 先上后下，先左后右 的顺序 ,合并完之后需要删除多余的单元格。

1.跨行合并： `rowspan`="合并单元格的个数 "


        <tr>
            <!-- <td>李四</td> -->            
            <td rowspan="2">两个优秀的学生</td>
            <td>43</td>
            <td>45</td>
            <td>99</td>
        </tr>

2.跨列合并： `colspan`="合并单元格的个数 "

       <tr>
            <th>人物</th>
            <th>语文</th>
            <th colspan="3">两门学科</th>
            <!--
                <th>数学</th>
                <th>英语</th>
            -->
            
        </tr>

最终效果图：

我们可以看到：

第3行和第4行的第一列合并了，形成的一个单元格，“两个优秀的学生”

并且，第一行的第3列和第4列也合并了。

三、表单

1.表单

在 HTML 中，一个完整的表单通常由 表单控件（ 也称为表单元素）、 提示信息和表单域 3 个部分构成。

表单目的是为了收集用户信息。

2.表单控件

包含了具体的 表单功能项 ，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

3.提示信息

一个表单中通常还需要包含一些 说明性的文字 ，提示用户进行填写和操作。

4.表单域

它相当于一个 容器 ，用来容纳所有的表单控件和提示信息。

可以通过它定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法。

注意：如果不定义表单域，表单中的数据就无法传送到后台服务器

HTML基础(5) | 青训营笔记

HTML基础知识总结(五)

一、表格的属性

1.边框 border

2.cellspacing

3.cellpadding