精华内容
下载资源
问答
  • 2021-06-27 09:53:41

    通常情况下我们在Word中创建表格,只需插入表格,然后设定相应的行数和列数即可。但是在HTML网页中,所有的元素都是要通过标签定义格式的,要想创建表格,就需要使用表格相关的标签。使用标签创建表格的基本语法格式如下:

    8329f99dd69e205b7fb3073b9b277a88.png

    在上面的语法中包含三对HTML标签,分别为 

    、、  ,它们是创建HTML网页中表格的基本标签,缺一不可,对这些标签的具体解释如下:

    ::用于定义一个表格的开始与结束。在

      用于定义表格中的一行,必须嵌套在标签中,在中包含几对,就表示该表格有几行。

    :  用于定义表格中的单元格,必须嵌套在标签中,一对中包含几对,就表示该行中有多少列(或多少个单元格)。

    即使去掉边框,表格中的内容依然整齐有序地排列着。创建表格的基本标签为

    、、,默认情况下,表格的边框为0,宽度和高度(自适应)靠表格里的内容来支撑。

    注意:

    学习表格的核心是学习

    标签,它就像一个容器,可以容纳所有的标签,中甚至可以嵌套表格

    。但是

    中只能嵌套,不可以在标签中输入文字。<

    猜你喜欢:

    更多相关内容
  • 表格和列表基础标签

    2020-12-17 19:21:49
    一、表格 表格作用: 存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。 因为它可以让数据显示的非常...创建表格基本语法: <table> <tr> <td>单

    一、表格

    表格作用:
    存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。

    因为它可以让数据显示的非常的规整,可读性非常好。

    特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。

    1. 创建表格

    在HTML网页中,要想创建表格,就需要使用表格相关的标签。

    创建表格的基本语法:

    <table>
      <tr>
        <td>单元格内的文字</td>
        ...
      </tr>
      ...
    </table>
    

    要深刻体会表格、行、单元格他们的构成。

    在上面的语法中包含基本的三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

    1. table用于定义一个表格标签。

    2. tr标签 用于定义表格中的行,必须嵌套在 table标签中。

    3. td 用于定义表格中的单元格,必须嵌套在标签中。

    4. 字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。

    **总结: **

    • 表格的主要目的是用来显示特殊数据的
    • 一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签
    • 中只能嵌套 类的单元格
    • 标签,他就像一个容器,可以容纳所有的元素

    2. 表格属性

    表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。

    ![](https://img-blog.csdnimg.cn/20201217191339889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk5MTQzMw==,size_16,color_FFFFFF,t_70

    <table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
       <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
       <tr>  <td>刘德华</td> <td></td> <td>55</td>  </tr>
       <tr>  <td>郭富城</td> <td></td> <td>52</td>  </tr>
       <tr>  <td>张学友</td> <td></td> <td>58</td>  </tr>
       <tr>  <td>黎明</td>   <td></td> <td>18</td>  </tr>
       <tr>  <td>刘晓庆</td> <td></td> <td>63</td>  </tr>
    </table>
    

    3. 表头单元格标签th

    • 作用:
      • 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
    • 语法:
      • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
    		<tr>  
    			<th>姓名</th> 
    			<th>性别</th>
    			<th>电话</th>
    		</tr>
    		<tr>
    			<td>小王</td>
    			<td></td>
    			<td>110</td>
    		</tr>
    		<tr>
    			<td>小明</td>
    			<td></td>
    			<td>120</td>
    		</tr>	
    	</table>
    

    th 也是一个单元格 只不过和普通的 td单元格不一样,它会让自己里面的文字居中且加粗

    4. 表格标题caption

    定义和用法

    <table>
       <caption>我是表格标题</caption>
    </table>
    

    **注意: **

    1. caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
    2. caption 标签必须紧随 table 标签之后。
    3. 这个标签只存在 表格里面才有意义。你是风儿我是沙

    5. 合并单元格(难点)

    合并单元格是我们比较常用的一个操作,但是不会合并的很复杂。

    5.1 合并单元格2种方式

    • 跨行合并:rowspan=“合并单元格的个数”
    • 跨列合并:colspan=“合并单元格的个数”**

    5.2 合并单元格顺序

    **合并的顺序我们按照 先上 后下 先左 后右 的顺序 **

    跟我们以前学习汉字的书写顺序完全一致。

    5.3 合并单元格三步曲

    1. 先确定是跨行还是跨列合并
    2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
    3. 删除多余的单元格 单元格

    6. 总结表格

    标签名定义说明
    table表格标签就是一个四方的盒子
    tr表格行标签行标签要再table标签内部才有意义
    td单元格标签单元格标签是个容器级元素,可以放任何东西
    th表头单元格标签它还是一个单元格,但是里面的文字会居中且加粗
    caption表格标题标签表格的标题,跟着表格一起走,和表格居中对齐
    clospan 和 rowspan合并属性用来合并单元格的
    1. 表格提供了HTML 中定义表格式数据的方法。
    2. 表格中由行中的单元格组成。
    3. 表格中没有列元素,列的个数取决于行的单元格个数。
    4. 表格不要纠结于外观,那是CSS 的作用。
    5. 表格的学习要求: 能手写表格结构,并且能简单合并单元格。

    7. 拓展阅读@

    表格划分结构(了解)

    对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构
    

    注意:

    1. :用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签!
    2. :用于定义表格的主体。放数据本体 。
    3. 放表格的脚注之类。
    4. 以上标签都是放到table标签中。

    二、列表

    1.1 无序列表 ul (重点)

    无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>
    
      • 中只能嵌套
      • ,直接在
          标签中输入其他标签或者文字的做法是不被允许的。
        • 之间相当于一个容器,可以容纳所有元素。
        • 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

        1.2 有序列表 ol (了解)

        有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

        <ol>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          ......
        </ol>
        

        所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

        1.3 自定义列表(理解)

        定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

        <dl>
          <dt>名词1</dt>
          <dd>名词1解释1</dd>
          <dd>名词1解释2</dd>
          ...
          <dt>名词2</dt>
          <dd>名词2解释1</dd>
          <dd>名词2解释2</dd>
          ...
        </dl>
        
        ## 1.4 列表总结
        
        | 标签名    |     定义     | 说明                                                   |
        | --------- | :----------: | :----------------------------------------------------- |
        | <ul></ul> | **无序标签** | 里面只能包含li    没有顺序,我们以后布局中最常用的列表 |
        | <ol></ol> |   有序标签   | 里面只能包含li    有顺序, 使用情况较少                |
        | <dl></dl> |  自定义列表  | 里面有2个兄弟, dt 和 dd                               |
        
        我们现在还没有学布局,现在只要保证2个点:
        
        1. 学会什么时候用无序列表, 学会什么时候用自定义列表
        2. 无序列表和自定义列表代码怎么写?
        3. 具体的我们刚才看的布局,等我们学了css 在来全面布局。
        
        # 2. 表单标签(掌握)
        
        目标:
        
        * 能写出最常用的注册类表单
        * 能说出input表单常见属性
        
        现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图
        
        <img src="media/car.jpg"  width="500" />
        
        **作用: **
        
        表单目的是为了收集用户信息。
        
        在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。
        
        > 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
        
        <img src="media/bd.png" />
        
          **表单控件: **
        
        ​       包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
        
          **提示信息:**
        
        ​        一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
        
          **表单域:**  
        
        ​      他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
        
        ## 2.1 input 控件(重点)
        
        
        - 语法:
        
          ```html
          <input type="属性值" value="你好">
        
        • input 输入的意思
        • <input />标签为单标签
        • type属性设置不同的属性值用来指定不同的控件类型
        • 除了type属性还有别的属性

        1. type 属性

        • 这个属性通过改变值,可以决定了你属于那种input表单。
        • 比如 type = ‘text’ 就表示 文本框 可以做 用户名, 昵称等。
        • 比如 type = ‘password’ 就是表示密码框 用户输入的内容 是不可见的。
        用户名: <input type="text" /> 
        密  码:<input type="password" />
        

        2. value属性 值

        用户名:<input type="text"  name="username" value="请输入用户名"> 
        
        • value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。

        3. name属性

        用户名:<input type="text"  name=“username” />  
        

        name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。

        • name属性后面的值,是我们自己定义的。

        • radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

        <input type="radio" name="sex"  /><input type="radio" name="sex" />
        • name属性,我们现在用的较少, 但是,当我们学ajax 和后台的时候,是必须的。

        4. checked属性

        • 表示默认选中状态。 较常见于 单选按钮和复选按钮。
        性    别:
        <input type="radio" name="sex" value="" checked="checked" /><input type="radio" name="sex" value="" />

        上面这个,表示就默认选中了 男 这个单选按钮

        5. input 属性小结

        属性说明作用
        type表单类型用来指定不同的控件类型
        value表单值表单里面默认显示的文本
        name表单名字页面中的表单很多,name主要作用就是用于区别不同的表单。
        checked默认选中表示那个单选或者复选按钮一开始就被选中了

        2.2 label标签(理解)

        目标:

        label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

        概念:

        label 标签为 input 元素定义标注(标签)。

        作用:

        用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

        如何绑定元素呢?

        1. 第一种用法就是用label直接包括input表单。
        <label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>
        

        适合单个表单选择

        1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
        <label for="sex"></label>
        <input type="radio" name="sex"  id="sex">
        

        当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面

        2.3 textarea控件(文本域)

        • 语法:
        <textarea >
          文本内容
        </textarea>
        
        • 作用:

          通过textarea控件可以轻松地创建多行文本输入框.

          cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

        文本框和文本域区别

        表单名称区别默认值显示用于场景
        input type=“text”文本框只能显示一行文本单标签,通过value显示默认值用户名、昵称、密码等
        textarea文本域可以显示多行文本双标签,默认值写到标签中间留言板

        2.4 select下拉列表

        目的:

        如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.

        语法:

        <select>
          <option>选项1</option>
          <option>选项2</option>
          <option>选项3</option>
          ...
        </select>
        
        • 注意:
        1. <select> 中至少包含一对 option
        2. 在option 中定义selected =" selected "时,当前项即为默认选中项。
        3. 但是我们实际开发会用的比较少

        3. form表单域

        • 收集的用户信息怎么传递给服务器?

          通过form表单域

        • 目的:

          在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

        **语法: **

        <form action="url地址" method="提交方式" name="表单名称">
          各种表单控件
        </form>
        

        常用属性:

        属性属性值作用
        actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
        methodget/post用于设置表单数据的提交方式,其取值为get或post。
        name名称用于指定表单的名称,以区分同一个页面中的多个表单。

        注意:

        每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。

        2.6 团队约定

        元素属性

        • 元素属性值使用双引号语法
        • 元素属性值可以写上的都写上

        推荐:

        <input type="text" />	
        <input type="radio" name="name" checked="checked" />
        

        不推荐:

        <input type=text  />	
        <input type='text' />	
        <input type="radio" name="name" checked />
        
        展开全文
      • 表格标签-表格基本结构

        千次阅读 2020-11-29 18:59:32
        基本表格结构中,表格标题、项目表头和数据资料构成了表格基本结构三个要素。 例如下图所示的表格中,表格标题为“通讯录”,表格第一行单元格中的内容基本不变,称作项目表头,表格第二行后单元格的内容通常会...

        第1关:网页表格的基本概念
        任务描述
        本关任务:完成一组关于表格基本概念的选择题。
        相关知识
        为了完成本关任务,你需要掌握:1.表格的结构,2.表格的基本标签,3.表格标签的基本属性。
        表格的结构
        在基本表格结构中,表格标题、项目表头和数据资料构成了表格基本结构三个要素。
        例如下图所示的表格中,表格标题为“通讯录”,表格第一行单元格中的内容基本不变,称作项目表头,表格第二行后单元格的内容通常会动态改变,称作数据资料。
        在这里插入图片描述

        表格的基本标签
        HTML表格由table标签以及一个或多个tr、th或td标签组成:
        table标签:定义一个表格
        caption标签:定义表格标题,嵌套在<table></table>
        tr标签:定义表格中的一行,嵌套在<table></table>
        th标签:定义表格中的表头单元格,嵌套在<tr></tr>
        td标签:定义表格中的数据单元格,嵌套在<tr></tr>
        表格标签的基本属性
        table标签的基本属性
        table标签的基本属性如下图所示:
        在这里插入图片描述

        tr标签的基本属性
        tr标签的基本属性如下图所示:
        在这里插入图片描述

        th和td标签的基本属性
        th和td标签的基本属性如下图所示:
        在这里插入图片描述开始你的任务吧,祝你成功!
        参考答案:
        在这里插入图片描述
        在这里插入图片描述
        在这里插入图片描述
        第2关:创建简单的表格
        任务描述
        本关任务:创建一个两行两列的表格。
        相关知识
        为了完成本关任务,你需要掌握:1.表格的结构及对应的标签,2.表格标签的属性。
        表格的结构及对应的标签
        一个基本的表格是由行和每行中的单元格组成的,一般要包含表格标题、项目标题和数据资料三个要素。例如下图所示的表格基本表格
        在这里插入图片描述
        对应的代码为:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <table border="5px">
               <caption>通讯录</caption>
                <tr>
                    <th>姓名</th>
                    <th>QQ</th>
                    <th>电话</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>123456</td>
                    <td>13511112222</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>654321</td>
                    <td>13611112222</td>
                </tr>
            </table>
        </body>
        </html>
        

        表格标签的属性
        显然上面的表格很不美观,我们可以尝试为表格添加背景色,并调整表格的宽度和单元格的宽度。
        示例如下:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <table border="5px" bgcolor="00ffff" width="300">
               <caption>通讯录</caption>
                <tr>
                    <td width=100>姓名</td>
                    <td width=100>QQ</td>
                    <td width=100>电话</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>123456</td>
                    <td>13511112222</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>654321</td>
                    <td>13611112222</td>
                </tr>
            </table>
        </body>
        </html>
        

        实现的效果如下图所示:
        在这里插入图片描述

        当然,这个表格效果还不是很完美,你可以做的更好,是吧?!
        编程要求
        根据提示,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
        1.在<body></body>之间创建一个表格,表格要求两行,每行都包含两个单元格,第一行的单元格是项目表头,第二行是数据单元格。
        2.为表格添加如下图所示的背景图
        在这里插入图片描述
        该图的URL为:https://www.educoder.net/api/attachments/1208912
        3.表格的边框线设置为4px,总宽度200,每个单元格宽100
        实现的效果图如下:
        在这里插入图片描述

        测试说明
        补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
        参考代码:

        <!DOCTYPE html>
        <html>
         <head>
          <meta charset="utf-8"/>
          <title>创建表格</title>
         </head>
         <body>
           <!-- ********* Begin ******* -->
          <table border="4px"  width="200" background="https://www.educoder.net/api/attachments/1208912">
               <caption>成绩表</caption>
                <tr>
                    <th width=100>姓名</th>
                    <th width=100>成绩</th>
                </tr>
                <tr>
                    <td width=100>张三</td>
                    <td width=100>90</td>
                </tr> 
            </table>
           <!-- ********* End ********* -->
         </body> 
        </html>在这里插入代码片
        

        第3关:表格行样式的设置
        任务描述
        本关任务:编写一个两行两列的表格网页,表格中的行样式进行设置。效果如下图所示:
        在这里插入图片描述

        相关知识
        为了完成本关任务,你需要掌握:tr标签及其属性的设置。
        tr标签
        tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式:
        height
        tr标签中的height属性设置行高,属性取值为具体行高的数值。
        align
        tr标签中的align属性设置行内单元格中文本的水平对齐方式,属性取值可以为left、center、right。
        valign
        tr标签中的valign属性设置行内单元格中文本的垂直对齐方式,属性取值可以为top、middle、bottom。
        bgcolor
        tr标签中的bgcolor属性设置行内单元格的背景颜色,属性取值可以为颜色单词或颜色代码。
        background
        tr标签中的background属性设置行背景图像,属性取值为背景图像的路径。
        编程要求
        根据提示,在右侧编辑器中的Begin - End区域内补充代码,用于设置表格第一行的样式,具体要求是:
        1.该行的行高为40。
        2.该行单元格内容的水平和垂直对齐方式都为居中,
        3.该行的颜色代码设置为00ffff
        测试说明
        补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。

        参考代码:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8"/>
            <title>表格行样式的设置</title>
        </head>
        <body>
            <table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200">
               <caption>成绩表</caption>
               <!-- ********* Begin ********* -->
                <tr height=40 align="center" valign="middle" bgcolor="00ffff"
               <!-- ********* End ********* -->
                    <th width="100">姓名</td>
                    <th width="100">成绩</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>90</td>
                </tr>
            </table>
            
        </body>
        </html>在这里插入代码片
        

        第4关:表格中单元格样式的设置
        任务描述
        本关任务:编写一个两行两列的表格网页,表格中的单元格样式进行设置。效果如下图所示:
        在这里插入图片描述

        相关知识
        为了完成本关任务,你需要掌握:表格中单元格样式的设置。
        表格中的单元格样式
        表格中单元格的样式分为单元格的整体样式设置和某个单元格样式的设置。
        单元格整体样式
        单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。
        cellspacing
        cellspacing属性用于设置单元格之间的间隙,取值为某一数值。
        cellpadding
        cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙,也称为内边距,取值为某一数值。
        某个单元格的样式
        可在对应的th或td标签中设置单元格的属性。
        width
        th或td标签中的width属性设置单元格的宽度,属性取值为具体宽度值。
        height
        th或td标签中的height属性设置单元格的高,属性取值为具体行高度值。
        align
        th或td标签中的align属性设置单元格中文本的水平对齐方式,属性取值可以为left、center、right。
        valign
        th或td标签中的valign属性设置单元格中文本的垂直对齐方式,属性取值可以为top、middle、bottom。
        bgcolor
        th或td标签中的bgcolor属性设置单元格的背景颜色,属性取值可以为颜色单词或颜色代码。
        background
        th或td标签中的background属性设置单元格的背景图像,属性取值为背景图像的路径。
        编程要求
        根据提示,在右侧编辑器中的Begin - End区域内补充代码,用于设置表格中单元格的样式,具体要求是:
        1.该Begin1 - End1区域内添加table标签,设置表格边框线的粗细为4px,单元格之间的间隙为0,单元格内文本的内边距为8,表格总宽度200。
        2.Begin2 - End2区域内添加两个数据单元格标签,第一个数据单元格标签中设置单元格的宽度为120,单元格内的文本为“张三”;第二个数据单元格标签中设置其文本的水平对齐方式为居中,单元格内的文本为“90”。
        测试说明
        补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
        参考代码:

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8"/>
            <title>表格单元格样式的设置</title>
        </head>
        <body>
            <!-- ********* Begin1 ********* -->
            <table border="4px" cellspacing="0" cellpadding="8" width="200">
            <!-- ********* End1 ********* -->
               <caption>成绩表</caption>
                <tr height=40 align=center  valign=middle bgcolor=00ffff>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
                <tr bgcolor=00ff00>
                    <!-- ********* Begin2 ********* -->
                    <td width=120>张三</td>
                    <td align="center">90</td>  
                    <!-- ********* End 2********* -->
                </tr>
            </table>   
        </body>
        </html>在这里插入代码片
        
        展开全文
      • 创建表格 在HTML网页中,要想创建表格,就需要...格的基本标签,缺一不可,下面对他们进行具体地解释 1.table用于定义一表格。 2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就...

        创建表格
        在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:

        单元格内的文字
        在上面的语法中包含三对HTML标签,分别为
        、、,他们是创建表 格的基本标签,缺一不可,下面对他们进行具体地解释 1.table用于定义一个表格。 2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。 3.td /td:用于定义表格中的单元格,必须嵌套在标签中,一对 中包含几对 ,就表示该行中有多少列(或多少个单元格)。 4.中只能嵌套 5. 标签,他就像一个容器,可以容纳所有的元素

        表格属性
        1.boder:设置表格的边框
        2.cellspacing:设置单元格与单元格之间的空白距
        3.cellpadding:设置单元格与单元格边框之间的空白的间距
        4.width:设置表格的宽度
        5.height:设置表格的高度
        6.align:设置表格在网页中的水平对齐方式

        合并单元格(难点)
        跨行合并:rowspan 跨列合并:colspan
        合并单元格的思想:
        将多个内容合并的时候,就会有多余的东西,把它删除。 例如 把 3个 td 合并成一个, 那就多余了
        2个,需要删除。
        公式: 删除的个数 = 合并的个数 - 1
        合并的顺序 先上 先左

        表单标签(掌握)
        现实中的表单,类似我们填的单子。
        目的是为了收集用户信息。
        在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。
        在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
        表单控件:
        包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
        提示信息:
        一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
        表单域:
        他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序
        的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务
        器。

        input 控件(重点)
        在上面的语法中,标签为单标签,type属性为其最基本的属性,其取值有多种,用于指定不同
        的控件类型。除了type属性之外,标签还可以定义很多其他的属性,其常用属性如下表所示。

        在这里插入图片描述

        label标签(理解)
        label 标签为 input 元素定义标注(标签)。
        作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
        如何绑定元素呢?
        for 属性规定 label 与哪个表单元素绑定。

        textarea控件(文本域)
        如果需要输入大量的信息,就需要用到标签。通过textarea控件可以轻松地创建
        多行文本输入框,其基本语法格式如下:
        文本内容

        下拉菜单
        使用select控件定义下拉菜单的基本语法格式如下
        选项1 选项2 选项3 …
        注意:

        1. 中至少应包含一对。 2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

        表单域
        在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的
        所有内容都会被提交给服务器。创建表单的基本语法格式如下:

        各种表单控件

        常用属性:
        2. Action
        在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数
        据的服务器程序的url地址。
        3. method
        用于设置表单数据的提交方式,其取值为get或post。 3. name
        用于指定表单的名称,以区分同一个页面中的多个表单。
        注意: 每个表单都应该有自己表单域。

        展开全文
      • 上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一作业: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title><...
      • table的基本使用表格的作用除了可以显示一个表格外,有的时候还可以用于辅助排版。以前的网页都是使用表格进行排版的,不过现在都不流行了,因为表格排版不利于网页结构。1、新建表格table就是表格tr是表格的行,td...
      • 表格标签

        千次阅读 2019-11-30 11:45:34
        1 表格 table(会使用) 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示...创建表格基本语法格式如下: <table> <tr> <td>单元格内的文字</td> ... </tr> ......
      • 掌握种列表标签 掌握表格标签 掌握表格标签 掌握表单标签 掌握H5新增表单和表单属性 认识网页 文字,图像,超链接组成,视频,音频,和Flash 网页是怎么形成的? 常见浏览器介绍 浏览器是网页运行的平台,常用的...
      • 一、创建表格 学会使用html的<table>标签在网页中插入表格 基本语法格式 <table> <tr> <td></td> </tr> tr标签定义行,td标签定义列 </table> 1.案例演示 <!...
      • 【 JAVA HTML基础,HTML表格创建

        千次阅读 2022-03-21 17:15:07
        超文本标记语言,标准通用标记语言下的一应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),...
      • web前端创建表格

        千次阅读 2019-02-18 20:15:59
        1.1创建表格  &lt;table&gt;  &lt;tr&gt;  &lt;td&gt;&lt;单元格&lt;/td&gt;  &lt;td&gt;&lt;单元格&lt;/td&gt;  &lt;td&gt;&lt;单元格&...
      • JavaScript:创建表格动态插入数据

        千次阅读 2020-12-09 21:06:25
        使用JavaScript动态插入表格和数据 一、创建HTML并布置好基本格局 这里没有什么难点,基本HTML知识 为了简单实现没有使用thead和tbody进行设计 <html> <head> <meta charset="UTF-8"> <title...
      • 标签名>标签内容</标签名> 以<标签名>开头,以</标签名>结尾。 还有亿点要说明,HTML代码最常使用两空格进行缩进,当然,也可以为4格,3格,甚至可以不用缩进。但我建议缩进代码,因为这...
      • HTML常用标签1.1 排版标签1)标题标签h (熟记)2)段落标签p ( 熟记)3)水平线标签hr(认识)4)换行标签br (熟记)5)div 和 span标签(重点)排版标签总结1.2 文本格式化标签(熟记)1.3 标签属性1.4 图像标签img (重点)...
      • 表格基本结构

        千次阅读 2020-10-18 22:35:09
        个基本表格是由行和每行中的单元格组成的,一般要包含表格标题、项目标题和数据资料三个要素。例如下图所示的表格 对应的代码为: <!DOCTYPE html> <html> <head> <meta charset="UTF-8...
      • html表格(table)的基本结构

        千次阅读 2021-06-11 13:16:16
        表格基本结构 调试软件:hBuilder 简单的html表格由table元素以及一或者多<tr>、<th>或<td>元素组成。<tr>元素定义表格的行,<th>元素定义表格的头,<td>定义表格...
      • 下面通过浏览器来查看这页面的源代码,如图所示,这些源代码就是浏览器可以理解并展示的一种计算机标签语言—HTML HTML 是 Hyper Text Markup Language 的缩写,中文翻译为超文本标记语言,是制作网页最基本的...
      • HTML 基本开发方式,学会常用的 HTML 标签

        千次阅读 多人点赞 2022-04-28 19:13:22
        使用记事本创建文件,后缀名改成 .html 即可,运行 html 也不需要额外的编译器,直接有浏览器就行 hello world! 虽然这代码能运行,但是其实并不算是一合法的 HTML 语法,那为什么浏览器还能正常运行呢??...
      • 在html网页中想要创建表格就需要使用表格相关的标签 创建表格基本语法如下: <table> <tr> <td>单元格内的文字</td> ...... </tr> ...... </table> 在以上的语法中...
      • 【JavaScript】---DOM创建表格

        千次阅读 热门讨论 2015-08-03 16:17:01
        什么是DOM? DOM:即文档对象模型  D:整个Web加载的网页文档 ... O:类似window对象之类的东西,可以调用属性和方法,... DOM有三个等级:DOM1/DOM2/DOM3其中DOM1是W3C标准。 DOM 定义了访问诸如 XML 和 XHTM
      • WEB前端之网页设计—-最新最全详解/如何在网页上创建表格③ 一、表格效果图1: &amp;amp;amp;lt;table border=&amp;amp;quot;0px&amp;amp;quot; cellspacing=&amp;amp;quot;1px&amp;amp;...
      • 表格table标签的属性及使用方式

        千次阅读 2019-09-11 19:31:20
        创建表格基本语法格式如下: <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 在上面的语法中包含对HTML标签,分别为 <table><...
      • HTML——表格

        千次阅读 多人点赞 2021-11-29 17:36:50
        本关任务:创建你的第一个表格,它的边框宽度为5px,内容和效果图展示的一样。 实现的效果如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body&...
      • 各位同学好,今天给大家介绍一下Pandas库中DataFrame类型数据的创建方法和基本操作。 文章内容如下:(1)使用字典类创建。 字典类有:①数组、列表、元组构成的字典;②Series构造的字典;③字典构造的字典。(2)...
      • 表格标记

        千次阅读 2014-09-27 09:18:04
        1.创建表格 1.1 表格的基本构成table、t
      • HTML网页设计:、图像标签标签

        千次阅读 多人点赞 2021-03-20 21:07:44
        图像标签——<img>... 标签的作用是为被引用的图像创建占位符,其src和alt为必需属性。 常用属性: [src]: 规定显示图像的URL,URL 指存储图像的位置,可以用绝对位置和相对位置,建议使用相对
      • Html基本结构、语法规则、常用标记/标签 (h1-h6/p /i/em/b/hr/br/strong/b/sub/sup/del/)及空格符&nbsp; 注:自己总结的下面分开重点和不重点的地方 一、HTML的定义: HTML:是超文本标记语言(Hpyer text ...
      • 最近,又回顾学习了html的一些基本知识,在此mark一下:一、块级标签、行内标签与自闭合标签 ①块级标签:占据一整行,高度、行高、内边距和外边距都可以改变,宽度和游览器的宽度一样,和内容无关,可以容纳块级...
      • HTML基本语法格式(元素、标签

        万次阅读 多人点赞 2019-03-06 19:48:48
        第二部分:和标签之间文本是头信息,放在元素的最上面使用,头部分信息不会显示在浏览器窗口中,主要包括页面的一些基本描述语句,用于说明文件的标题和文件的公共属性。 第部分:标签是HTML文件的主体标记,标...
      • 把这些掌握就差不多了一、建立分类下拉列表填充项我们常常要将企业的名称输入到表格中,为了保持名称的一致性,利用“数据有效性”功能建了一分类下拉列表填充项。1.在Sheet2中,将企业名称按类别(如“工业企业”...

      空空如也

      空空如也

      1 2 3 4 5 ... 20
      收藏数 52,881
      精华内容 21,152
      关键字:

      创建表格的三个基本标签

      友情链接: ningfao_v77.zip