【11】HTML基础(3)——HTML常用标签⑦

★文章内容学习来源:拉勾教育大前端就业集训营

【11】HTML基础(3)——HTML常用标签

十二、表格制作相关标签

(一)表格基础

创建一个简单的表格至少有三个标签组成,分别是

标签。

1.

表格,定义的是整个的表格大结构。

2.

table rows,表格的行,定义的是表格由多少行组成。

3.

table data,表格数据,也叫表格单元格,定义的是每一行内部的单元格。

4.三者的关系:

table>tr>td (">"表示嵌套的意思);
一个表格中有多个行,每个行中有多个单元格。

(二)标签常用属性
,以最小单元格为标准;
2.再添加每—行的
标签属性
含义 属性值
border 边框 数字,表示像素值
style 标签样式属性 border-collapse∶collapse表示边框塌陷。

示例2*3的表格:

<table border="1px">
    <tr>
        <td>1.1td>
        <td>1.2td>
        <td>1.3td>
    tr>
    <tr>
        <td>2.1td>
        <td>2.2td>
        <td>2.3td>
    tr>
    <tr>
        <td>3.1td>
        <td>3.2td>
        <td>3.3td>
    tr>
table>

浏览器显示:
【11】HTML基础(3)——HTML常用标签⑦_第1张图片
★表格的单元格之间有默认的空隙,会导致双线边框。
解决方法∶设置标签样式属性style。
属性值∶ border-collapse∶collapse;表示边框塌陷。

示例2*3的表格:

<table border="1px" style="border-collapse: collapse">
    <tr>
        <td>1.1td>
        <td>1.2td>
        <td>1.3td>
    tr>
    <tr>
        <td>2.1td>
        <td>2.2td>
        <td>2.3td>
    tr>
    <tr>
        <td>3.1td>
        <td>3.2td>
        <td>3.3td>
    tr>
table>

浏览器显示:在这里插入图片描述

(三)表头单元格标签

如果要绘制表头,使用标签

1.语法:

1.

table head data,表头单元格;
2.在表格中绘制的时候,替换的是
的位置;
3.
标签中自带默认的css样式效果,文字显示粗体居中;

示例2*3的表格:

<table border="1px" style="border-collapse:collapse">
    <tr>
        <th>表头th>
        <th>表头th>
        <th>表头th>
    tr>
    <tr>
        <td>2.1td>
        <td>2.2td>
        <td>2.3td>
    tr>
    <tr>
        <td>3.1td>
        <td>3.2td>
        <td>3.3td>
    tr>
table>

浏览器显示:
【11】HTML基础(3)——HTML常用标签⑦_第2张图片

(四)合并单元格

通过单元格标签进行设置

1.语法:

(1)表格的单元格可以进行合并,通过

的两个标签的属性可以进行合并设置;
(2) rowspan∶跨行合并;上下的合并;
(3)colspan∶ 跨列合并;左右的合并;
(4)属性值∶ 数字,数字是几表示跨几行或跨几列合并。
示例1:

<table border="1px" style="border-collapse:collapse">
    <tr>
        <th colspan="2">th>
        <th>th>
    tr>
    <tr>
        <td rowspan="2">td>
        <td>td>
        <td>td>
    tr>
    <tr>
        <td>td>
        <td>td>
    tr>
table>

浏览器显示:
【11】HTML基础(3)——HTML常用标签⑦_第3张图片

示例2:某迷宫图:(后面有制作技巧)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        table {
      
            width :810px;
            height :810px;
        }
        td {
      
            text-align:center;
        }
    style>
head>
<body>
    <table border="1" style="border-collapse: collapse;">
        <tr>
            <td colspan="12">1td>
            <td rowspan="12">2td>
        tr>
        <tr>
            <td rowspan="12">4td>
            <td colspan="10">5td>
            <td rowspan="10">6td>
        tr>
        <tr>
            <td rowspan="10">8td>
            <td colspan="8">9td>
            <td rowspan="8">10td>
        tr>
        <tr>
            <td rowspan="8">12td>
            <td colspan="6">13td>
            <td rowspan="6">14td> 
        tr>
        <tr>
            <td rowspan="6">16td>
            <td colspan="4">17td>
            <td rowspan="4">18td> 
        tr>
        <tr>
            <td rowspan="4">20td>
            <td colspan="2">21td>
            <td rowspan="2">22td> 
        tr>
        <tr>
            <td rowspan="2">24td>
            <td >25td> 
        tr>
        <tr>
            <td colspan="2">23td> 
        tr>
        <tr>
            <td colspan="4">19td> 
        tr>
        <tr>
            <td colspan="6">15td> 
        tr>
        <tr>
            <td colspan="8">11td> 
        tr>
        <tr>
            <td colspan="10">7td> 
        tr>
        <tr>
            <td colspan="13">3td> 
        tr>
    table>
body>
html>

浏览器显示:【11】HTML基础(3)——HTML常用标签⑦_第4张图片
制作技巧
1.先列出所有行

单元格;
3.划分单元格所在行时,顶边对齐的属于同一行;
4.将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小的单元格。

(五)表格分区

一个完整的表格分为四个大的区域∶
表格标题、表格头部、表格主体、表格页脚。

1.分区标签

(1)

内部最直接的子级包含四个分区标签,他们都是双标签。
(2)∶ table head,表格的头部。内部嵌套tr>th;
(4)∶ table body,表格的主体。内部嵌套tr>td;
(5)< tfoot>∶ table foot,表格的页脚。内部嵌套tr>td
★四个分区可以选择性的进行组合。
★注意∶ 不论书写顺序如何颠倒,浏览器中的加载顺序都是自动按照
< caption>< thead>< tbody>< tfoot>执行的。

练习:浏览器显示如下
【11】HTML基础(3)——HTML常用标签⑦_第5张图片
★制作技巧
1.先书写大分区标签结构;
2.填充每个分区的内部内容;
3.如果有合并单元格内容,进行单元格合并;

完整代码如下


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>style>
head>
<body>
  <table border="1" style="border-collapse: collapse;">
    
    <caption>各地区固定资产投资情况caption>
    <thead>
      <tr>
        <th rowspan="2">地区th>
        <th colspan="2">按总量分th>
        <th colspan="2">按比重分th>
      tr>
      <tr>
        <th>自年初累计(亿元)th>
        <th>比去年同期增长(%)th>
        <th>自年初累计(%)th>
        <th>去年同期(%)th>
      tr>
    thead>
    
    <tbody>
      <tr>
        <td>全国td>
        <td>123456.78td>
        <td>9.5td>
        <td>100.0td>
        <td>100.0td>
      tr>
      <tr>
        <td>全国td>
        <td>123456.78td>
        <td>9.5td>
        <td>100.0td>
        <td>100.0td>
      tr>
      <tr>
        <td>全国td>
        <td>123456.78td>
        <td>9.5td>
        <td>100.0td>
        <td>100.0td>
      tr>
      <tr>
        <td>全国td>
        <td>123456.78td>
        <td>9.5td>
        <td>100.0td>
        <td>100.0td>
      tr>
      <tr>
        <td>全国td>
        <td>123456.78td>
        <td>9.5td>
        <td>100.0td>
        <td>100.0td>
      tr>
    tbody>
  table>
body>
html>

下篇继续html常用标签…

你可能感兴趣的:(前端学习中,html,html5)

∶ 表格的标题,内部书写标题文字;
(3)