HTML表格(HTML 表格的使用,收藏这一篇就够了)

HTML 表格

文章目录

  • HTML 表格
    • 1. 表格的定义
    • 2. 表格的标签
    • 3. 单元格边框(border)
    • 4. 合并单元格
      • 4.1 合并行单元格(colspan)
      • 4.2 合并列单元格(rowspan)
    • 5. 表格格式设置
      • 5.1 单元格的对齐(align)(居中,左对齐,右对齐)
      • 5.2. 背景色&图片(bgcolor & background)
        • 5.2.1 单元格背景色&图片
        • 5.2.2 表格背景色&图片
      • 5.3 单元格的边距(cellpadding)
      • 5.4 单元格间的距离(cellspacing)
      • 5.5 显示部分边框(frame & rules)

1. 表格的定义

标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 元素定义表格行,
元素组成表格结构;其中:
元素定义表头, 元素定义表格单元。
为了让表格更美观,我们会用到:border,colspan,rowspan,align,bgcolor 等来美化表格,具体在本文都有讲解;

2. 表格的标签

在HTML定义表格的时候,有以下标签供我们使用

NO 表格标签 用处
1
定义表格,生成的表格在一对
中;
2
定义表格标题,当表格需要标题时,使用
表格标题
3
定义表格的页眉
4
定义表格的主体
5
定义表格的页脚
6 定义表格的表头,一般是表头中的内容会被加黑;
7
定义表格的行
8 定义表格单元格
9
定义用于表格列的属性
10
定义表格列的组

3. 单元格边框(border)

表格边框:在使用

的方式来定义,其中:数字表示边框的宽度,单位为像素;以下举三个边框的例子;


<table>
    <tr>
        <th>编号th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td>1td>
        <td>马里奥td>
        <td>td>
    tr>
    <tr>
        <td>2td>
        <td>桃花公主td>
        <td>td>
    tr>

table>

<br>

<table border="2">
    <tr>
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td>1td>
        <td>马里奥td>
        <td>td>
    tr>
    <tr>
        <td>2td>
        <td>桃花公主td>
        <td>td>
    tr>

table>
<br>


<table border="10">
    <tr>
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td>1td>
        <td>马里奥td>
        <td>td>
    tr>
    <tr>
        <td>2td>
        <td>桃花公主td>
        <td>td>
    tr>

table>

上述代码效果:
HTML表格(HTML 表格的使用,收藏这一篇就够了)_第1张图片

4. 合并单元格

合并单元格时,合并行使用:colspan=“2”; 合并列使用:rowspan=“2” (这里的 ‘2’ 表明合并两个单元格),举例如下:

4.1 合并行单元格(colspan)

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯title>
head>
<body>

<h4>合并行单元格:h4>
<table border="1">
<caption>通讯录caption>
<tr>
  <th>姓名th>
  <th colspan="2">邮箱th>
tr>
<tr>
  <td>zhang kaitd>
  <td>[email protected]td>
  <td>[email protected]td>
tr>
table>

body>
html>

上述代码效果:
HTML表格(HTML 表格的使用,收藏这一篇就够了)_第2张图片

4.2 合并列单元格(rowspan)

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯title>
head>
<body>

<h4>合并列单元格:h4>
<table border="1">
<tr>
  <th>姓名th>
  <td>Bill Gatestd>
tr>
<tr>
  <th rowspan="3">邮箱th>
  <td>[email protected]td>
tr>
<tr>
  <td>[email protected]td>
tr>
<tr>
  <td>[email protected]td>
tr>
table>

body>
html>

上述代码效果:
HTML表格(HTML 表格的使用,收藏这一篇就够了)_第3张图片

5. 表格格式设置

5.1 单元格的对齐(align)(居中,左对齐,右对齐)

在对应的标签上增加 align 键值对,生效方式为"就近原则",如下例中,桃花公主单元格为left生效;

align 值 left center right
效果 左对齐 居中 右对齐
<table width="600" border="2">
    <tr align="center">
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center">1td>
        <td align="left">马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>
table>

上述代码效果(为了看清效果,所以设置了表格宽度 width=“600” ):
在这里插入图片描述

5.2. 背景色&图片(bgcolor & background)

  • 添加背景色使用:bgcolor
  • 添加背景图片使用:background

5.2.1 单元格背景色&图片

在单元格的标签上增加 bgcolor 或者 background,就可以添加背景色或者背景图片,以背景色为例;

<table width="600" border="2">
    <tr align="center">
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center">1td>
        <td align="left" bgcolor='red' >马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>
table>

上述代码效果:
在这里插入图片描述

5.2.2 表格背景色&图片

在表格的标签上增加bgcolor 或者 background,就可以添加背景色或者背景图片,以背景图片为例;

<table width="600" border="2" background='https://p1.ssl.qhimgs1.com/sdr/400__/t01f04c2504aa62bab7.gif'>
    <tr align="center">
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center">1td>
        <td align="left">马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>

table>

上述代码效果(由于我挑了一张动态图,所以这里的背景是动态的!):
在这里插入图片描述

5.3 单元格的边距(cellpadding)

标签使用cellpadding 即可,方法与上面的图片一样,直接举例如下:

<table width="600" border="2" cellpadding="8">
    <tr align="center">
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center">1td>
        <td align="left" bgcolor='red' >马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>
table>

上述代码效果:
HTML表格(HTML 表格的使用,收藏这一篇就够了)_第4张图片

5.4 单元格间的距离(cellspacing)

标签使用 cellspacing 即可,方法与上面的图片一样,直接举例如下:

<table width="600" border="2" cellspacing="8">
    <tr align="center">
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center">1td>
        <td align="left" bgcolor='red' >马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>
table>

上述代码效果:
HTML表格(HTML 表格的使用,收藏这一篇就够了)_第5张图片

5.5 显示部分边框(frame & rules)

  • 可以在
    标签内,增加 frame 键值对,控制表格外边框;键值对对应关系如下:
frame 键值 效果
void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外侧边框
rhs 显示右边的外侧边框
box 在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框
  • 可以在
    标签内,增加 rules 键值对,控制表格外边框;键值对对应关系如下:
frame 键值 效果
none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条
  • frame 举例如下:
<table width="600" cellspacing="8" frame="box">
    <tr align="center" >
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center" >1td>
        <td align="left" bgcolor='red' >马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>
table>

输出效果:
HTML表格(HTML 表格的使用,收藏这一篇就够了)_第6张图片

  • rules举例如下:
<table width="600" cellspacing="8" rules="cols">
    <tr align="center" >
        <th> 编号 th>
        <th>姓名th>
        <th>性别th>
    tr>
    <tr>
        <td align="center" >1td>
        <td align="left" bgcolor='red' >马里奥td>
        <td align="right">td>
    tr>
    <tr align="right">
        <td>2td>
        <td align="left">桃花公主td>
        <td>td>
    tr>
table>

输出效果:
在这里插入图片描述

你可能感兴趣的:(HTML,html)