HTML5教程

HTML表格table

本文主要是介绍HTML表格table，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

表格简介

表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。

类比：excel表格&网页中的表格

表格的作用

  • 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代

  • 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)

  • 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局

  •  

     

    表格基本标签

 

  • table

    • 语法: <table></table>

    • 作用:定义表格

  • tr

    • 语法: <tr></tr>

    • 作用:定义表格中的行  

  • td

    • 语法: <td></td>

    • 作用：定义表格数据（table data） 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    • 默认样式:内容水平居左，垂直居中

th

  • 语法:<th></th>

  • 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型

  • 默认样式：字体加粗，内容水平居中，垂直居中

<table>
  <tr>
      <td>姓名</td>
      <td>年龄</td>
  </tr>
  <tr>
      <td>张三</td>
      <td>18岁</td>
  </tr>
  <tr>
      <td>王五</td>
      <td>12岁</td>
  </tr>
  </table>

表格常用属性

table属性

width\height：定义表格的宽或高

<table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">

border

  • 作用 ：使用表格的边框属性可以显示一个带有边框的表格。

  • 注意：如果不定义边框属性，表格将不显示边框

cellpadding

  • 作用：定义单元格中内容和边框之间的间距

cellspacing

  • 作用：单元格和单元格之间的间距

 

td,th属性

<td width="100" height="100" align="center" valign="middle">

  • width\height

    • 作用：定义单元格宽度、高度

    • 注意：省略单位 默认px

  • align

    • 作用：单元格水平方向的对齐方式

    • 取值

      • left左对齐

      • center 居中对齐

      • right 右对齐

  • valign

    • 作用：单元格垂直方向的对齐方式

    • 取值

      • top顶对齐

      • middle居中对齐

      • bottom底部对齐

表格结构标签

  • caption

    • 语法：<caption></caption>

    • 作用：定义表格的标题

    • 默认样式：居中于表格之上

    • 注意： caption 标签必须紧随 table 标签之后

  • thead

    • 语法:<thead></thead>

    • 作用:用于组合 HTML 表格的表头内容

  • tbody

    • 语法:<thead></thead>

    • 作用:用于组合 HTML 表格的主体内容

    • 提示：一个表格允许包含多个<tbody>

  • tfoot

    • 语法：<tfoot></tfoot>

    • 作用：用于组合 HTML 表格的页脚内容

  • 总结

    • 每个表格只能定义一个标题<caption>

加了tbody,thead就不会受代码顺序的影响 无论怎么写顺序 都会从头部开始加载表格！！！ 

合并单元格 

  • rowspan 

    • 作用：跨行合并 语法：<td rowspan="2"> 电话 </td>

  • colspan

    • 作用：跨列合并 语法：<td rowspan="2"> 电话 </td>

  • 操作步骤

    • 1.确定是合并行还是合并列

    • 2.找到目标单元格，添加合并属性如：<td rowspan="2"> 电话 </td>

    • 3.删除多余单元格

表格总结

  • 未定宽度的表格、单元格适应内容

  • 同一行只识别一个高，取最大值

  • 同一列只识别一个宽，取最大值

  • 表格可以包含其他HTML标签以及表格

<!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>
    <style>
        /* body{
            background-color: gray;
        } */
        table{
            border-collapse: collapse;
            background-color: #f0f0f0;
            margin: 100px auto;
            border-radius: 5%;
        }
        td{
            border: 1px white solid;
            text-align: center;
        }
        .h50{
            height: 50px;
        }
        .w100{
            width: 100px;
        }
        .w80{
            width: 80px;
        }
        .h70{
            height:66px;
        }
        .h40{
            height: 40px;
        }
         .yellow{
             background-color: #fde982;
         }
    </style>
</head>
<body>
    <table>
        <tr style="background-color: #fe7569; color: white;">
            <td rowspan="2" class="w80">月租</td>
            <td class="h50" colspan="3">套餐包含</td>
            <!-- <td>A</td>
            <td>A</td> -->
            <td rowspan="2" style="width: 166px;">套餐超出及其他业务</td>
        </tr>
        <tr style="background-color: #fe7569; color: white;">
            <!-- <td >1</td> -->
            <td class="w100 h40">国内语音</td>
            <td class="w100">国内流量</td>
            <td class="w100">电子券</td>
            <!-- <td >3</td> -->
        </tr>
        <tr>
            <td class="h70">200元</td>
            <td>500分钟</td>
            <td>2GB</td>
            <td class="yellow">100元</td>
            <td rowspan="5">11111</td>
        </tr>
        <tr>
            <td class="h70">300元</td>
            <td>1000分钟</td>
            <td>5GB</td>
            <td class="yellow">150元</td>
            <!-- <td>1</td> -->
        </tr>
        <tr>
            <td class="h70">500元</td>
            <td>2000分钟</td>
            <td>10GB</td>
            <td class="yellow">250元</td>
            <!-- <td>2</td> -->
        </tr>
        <tr>
            <td class="h70">800元</td>
            <td>3000分钟</td>
            <td>30GB</td>
            <td class="yellow">400元</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td class="h70">1000元</td>
            <td>3000分钟</td>
            <td>40GB</td>
            <td class="yellow">500元</td>
            <!-- <td>4</td> -->
        </tr>
      
    </table>
</body>
</html>

 

 

 

这篇关于HTML表格table的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航