HTML表格学习

HTML学习笔记二

HTML表格：

HTML 表格由

标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

tr：表示表格的一行。
td：表示表格的数据单元格。
th：表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1" align="center" cellpadding="10px" cellspacing="0px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
        <th>地址</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>21</td>
        <td>12345@qq.com</td>
        <td>杭州</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>21</td>
        <td>12345@qq.com</td>
        <td>杭州</td>
    </tr>
</table>

在这里插入图片描述

<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。
<thead > 用于定义表格的标题部分.
<tbody > 用于定义表格的主体部分

例子一：表格内的标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

例子二：跨行或跨列的表格单元格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

单元格边距：

<table border="1" cellpadding="10">

使用 cellpadding 来创建单元格内容与其边框之间的空白。

单元格间距：

<table border="1" cellspacing="0">

使用 cellspacing 增加单元格之间的距离。
在这里插入图片描述

表格例子：

<!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>小说排行榜</title>
</head>

<body>
    <h2>小说排行榜</h2>
    <table border="1" cellspacing="0" cellpadding="10px">
        <thead>
            <tr>
                <th>排名</th>
                <th>书名</th>
                <th>作者</th>
                <th>今日搜索量</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>斗罗大陆</td>
                <td>唐家三少</td>
                <td>1200</td>
                <td>
                    <a href="http://www.baidu.com">贴吧</a>
                    <a href="http://www.baidu.com">图片</a>
                    <a href="http://www.baidu.com">百科</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>完美世界</td>
                <td>辰东</td>
                <td>1120</td>
                <td>
                    <a href="http://www.baidu.com">贴吧</a>
                    <a href="http://www.baidu.com">图片</a>
                    <a href="http://www.baidu.com">百科</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>盗墓笔记</td>
                <td>南派三叔</td>
                <td>860</td>
                <td>
                    <a href="http://www.baidu.com">贴吧</a>
                    <a href="http://www.baidu.com">图片</a>
                    <a href="http://www.baidu.com">百科</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>