HTML表格table

2021/9/15 23:35:48

编程Tag： table 表格 html 单元格语法定义对齐 --

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

表格简介

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

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

表格的作用

之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代
现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)
注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局
表格基本标签

table
- 语法: <table></table>
- 作用:定义表格

tr
- 语法: <tr></tr>
- 作用:定义表格中的行
td
- 语法: <td></td>
- 作用：定义表格数据（table data）单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- 默认样式:内容水平居左，垂直居中

语法:<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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML表格table

表格简介

表格的作用

表格基本标签

表格常用属性

table属性

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

border

cellpadding

cellspacing

td,th属性

width\height

align

valign

表格结构标签

caption

thead

tbody

tfoot

合并单元格

rowspan

colspan

操作步骤

表格总结

相关编程文章