学习不止眼前的教程与笔记 还需实践与创新
[设为首页] [加入收藏]

搜索

温馨提示：本处只能搜索图文,搜题目请进题库

首页>>网站建设>>Javascript>>经验笔记

HTML基础教程（十一） 表格

发布时间：2019-12-18 点击：28

    HTML表格

    在HTML中如果想要创建表格，我们有专门的完善的表格标签来实现，那就是table标签，这是一个闭合标签。

    在HTML表格中，会将表格分为若干行，在把每行分为若干单元格，也就是列，然后单元格内就可以存放我们操作EXCEL时所需要存放的数据，也可以是图片、列表、段落、表单、水平线一个嵌套表格等。

    一、定义语法 

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

    在HTML表格中最大的闭合标签就是<table>，其所有的子标签需要在<table>标签中。

    1、其中<tr>标签定义的是行，<td>定义的是列，也就是单元格；

    2、上述代码中有两个<tr>闭合标签，意思就是说定义了一个表格有两行；在<tr>标签中有两个<td>标签，也就是说一行有两个单元格.

    显示如下：

    row1,cell1
    		 row1,cell2
    row2,cell1
    		 row2,cell2

    3、在HTML表格中，每行可以单独定义有多少个单元格，它与其他行互不干涉。

    二、表格其他属性

    标签
    		 作用
    <table>
    		 定义表格
    <tr>
    		 定义表格的行
    <td>
    		 定义表格的单元格
    <th>
    		 定义表格的表头（文本加粗居中），与<td>用法相同
    <caption>
    		 定义表格标题
    <colgroup>
    		 定义表格列的组
    <col>
    		 定义表格列的属性
    <thead>
    		 定义表格的页眉
    <tbody>
    		 定义表格的主体
    <tfoot>
    		 定义表格的页脚

    三、实例应用

    代码： 

    <html>
<head>
<meta charset='utf-8'>
<title>HTML表格实例应用</title>
</head>
<body>
<table border="1">
  <thead>
    <tr>
      <th>名字</th><th>年纪</th><th>工作</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>张三</td><td>18</td><td>教师</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>李四</td><td>26</td><td>工人</td>
    </tr>
    <tr>
      <td>王五</td> <td>30</td><td>律师</td>
    </tr>
  </tbody>
</table>
</body>
</html>

    显示如下：

    小伙伴们动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

相关推荐

搜索

温馨提示：本处只能搜索图文,搜题目请进题库

图文推荐

热门文章

随机推荐

题库内容推荐

昵称：*
邮箱：
电话：
评论：