web前端学习(八)——HTML5中表格、边框的相关标签设置

简介: web前端学习(八)——HTML5中表格、边框的相关标签设置

1.HTML中表格边框的相关标签


表格由 <table> 标签来定义。

每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

边框属性通过 <table> 标签中的 border 属性进行设置,其中,border="0"表示无边框,border="1"默认就是带边框。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

表格的表头使用<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。

表格的标题使用<caption>标签进行定义。

单元格边距通过 <table> 标签中的 cellpadding 属性进行设置,其中,cellpadding="0"表示无边距,cellpadding="10"就是带上了单元格边距。

单元格间距通过 <table> 标签中的 cellspacing 属性进行设置,其中,cellspacing="0"表示无间距,cellspacing="10"就是带上了单元格间距。

下面我们来看10个小实例,这些实例将会运用到以上提到的所有标签及相应的属性。👇👇👇

实例一:无边框的表格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>这是一个无边框的表格</title>
  </head>
  <body>
    <h4>这个表格没有边框</h4>
    <table>
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
    </table>
    <hr/>
    <h4>这个表格也没有边框</h4>
    <table border="0">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例二:有边框的表格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>这是一个带边框的表格</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <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>
  </body>
</html>

运行结果如下:

 

实例三:设置表格的水平标题和垂直标题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <h4>水平标题:</h4>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Sex</th>
        <th>Telephone</th>
      </tr>
      <tr>
        <td>songzihao</td>
        <td>man</td>
        <td>1234567890</td>
      </tr>
    </table>
    <hr/>
    <h4>垂直标题</h4>
    <table border="1">
      <tr>
        <th>Name</th>
        <td>songzihao</td>
      </tr>
      <tr>
        <th>Sex</th>
        <td>man</td>
      </tr>
      <tr>
        <th>Telephone</th>
        <td>1234567890</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例四:设置带标题的表格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <table border="1">
      <caption>Java三大特性</caption>
      <tr>
        <th>序号</th>
        <th>特性</th>
      </tr>
      <tr>
        <td>①</td>
        <td>封装</td>
      </tr>
      <tr>
        <td>②</td>
        <td>继承</td>
      </tr>
      <tr>
        <td>③</td>
        <td>多态</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例五:设置跨行或跨列的表格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <h4>单元格跨两列</h4>
    <table border="1">
      <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
      </tr>
      <tr>
        <td>songzihao</td>
        <td>1234567890</td>
        <td>0987654321</td>
      </tr>
    </table>
    <hr/>
    <h4>单元格跨两行</h4>
    <table border="1">
      <tr>
        <th>Name</th>
        <td>songzihao</td>
      </tr>
      <tr>
        <th rowspan="2">Telephone</th>
        <td>1234567890</td>
      </tr>
      <tr>
        <td>0987654321</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例六:表格内添加表格或列表及列表项

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>
          <p>这是一个段落</p>
          <p>这是另一个段落</p>
        </td>
        <td>这个单元格包含一个表格:
          <table border="1">
            <tr>
              <td>A</td>
              <td>B</td>
            </tr>
            <tr>
              <td>C</td>
              <td>D</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>这个单元格包含一个列表
          <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
          </ul>
        </td>
        <td>Hello world!!!</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例七:设置表格的单元格边距

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <h4>没有单元格边距:</h4>
    <table border="1">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>
    <hr/>
    <h4>有单元格边距:</h4>
    <table border="1" cellpadding="10">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例八:设置表格的单元格间距 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <h4>没有单元格间距:</h4>
    <table border="1">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>
    <hr/>
    <h4>单元格间距="0"</h4>
    <table border="1" cellspacing="0">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>
    <hr/>
    <h4>单元格间距="10"</h4>
    <table border="1" cellspacing="10">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

 

实例九:创建一个简单完整的表格(theadtbodytfoot 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
    <style>
      thead {background-color: aqua;}
      tbody {background-color: chartreuse;}
      tfoot {background-color: crimson;}
    </style>
  </head>
  <body>
    <table border="1">
      <caption><strong>学生成绩单</strong></caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>560</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>男</td>
          <td>520</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>总分</td>
          <td colspan="2">1080</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

运行结果如下:

 

实例十:设置表格及单元格的背景(颜色、图片)

设置表格的背景图片 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>这是一个带边框的表格</title>
  </head>
  <body>
    <table border="1" background="E:\计算机专业学习资料和文件\HTML\image\tx.jpg">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <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>
  </body>
</html>

运行结果如下:

设置表格的背景颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>这是一个带边框的表格</title>
  </head>
  <body>
    <table border="1" bgcolor="#00FFFF">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <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>
  </body>
</html>

运行结果如下:

设置单元格的的背景图片及颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>这是一个带边框的表格</title>
  </head>
  <body>
    <table border="1" bgcolor="#00FFFF">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td bgcolor="#DC143C">row 1,cell 1</td>
        <td>row 1,cell 2</td>
      </tr>
      <tr>
        <td>row 2,cell 1</td>
        <td background="E:\计算机专业学习资料和文件\HTML\image\tx.jpg">row 2,cell 2</td>
      </tr>
    </table>
  </body>
</html>

运行结果如下:

相关文章
|
5天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
8天前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
28天前
HTML表格
HTML表格
42 4
|
5天前
|
存储 移动开发 前端开发
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
27天前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
96 0
|
22天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
22天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0