HTML篇六——（1）

lewis 1年前 (2024-03-18) 阅读数 5 #技术

一、表格标签1.1 表格的主要作用

表格主要用于显示、展示数据，它可以使数据显示的非常规整，可读性非常好。

1.2 表格的基本语法

基本语法：

<table> <!-- <table></table> 是用于定义表格的标签（即为表格最外面的部分） -->
  <tr> <!-- <tr></tr> 是用于定义表格中的行，必须嵌套在<table></table>标签中 -->
    <td> 单元格内的文字 </td> <!-- <td></td> 是用于定义表格中的单元格，必须嵌套在<tr></tr>标签中 -->
    ···
  </tr>
  ···
</table>

其中td指表格数据（table data），即数据单元格的内容。代码示例：

<!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>
   <table>
       <tr> <!-- 用于定义表格中的一行-->
           <td>   姓名   </td> <td>   班级   </td> <td>  总成绩  </td> <td>  年级排名  </td> <!-- 用于定义表格中的单元格 -->
       </tr>  
       <tr>
           <td>   小红   </td> <td>   一班   </td> <td>   749 </td> <td>    1  </td>
       </tr>    
       <tr>
           <td>   小橙   </td> <td>   二班   </td> <td>   700 </td> <td>    2  </td>
       </tr>
   </table>
</body>
</html>

1.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分，为table head 的缩写；语法格式如下：

<table>
  <tr>
    <th> 表头文本 </th>
    ···
  </tr>
  ···
</table>

代码示例：

<!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>
    <table>
        <tr> <!-- 用于定义表格中的一行-->
        <th>   姓名   </th> <th>   班级   </th> <th>  总成绩  </th> <th>  排名  </th> 
        </tr>  
        <tr>
            <td>   小红   </td> <td>   一班   </td> <td>   749 </td> <td>    1  </td>
        </tr>    
        <tr>
            <td>   小橙   </td> <td>   二班   </td> <td>   700 </td> <td>    2  </td>
        </tr>
    </table>
</body>
</html>

1.3 表格属性(了解)

表格标签的属性实际开发中不常用，一般都通过CSS进行设置。

属性名

属性值

描述

align

left、center、right

规定表格相对周围元素的对齐方式

border

1 或 ""

规定表格大院是否拥有边框，默认为""，表示没有边框

cellpadding

像素值

规定单元边沿与其内容之间的空白，默认 1 像素

cellspacing

像素值

规定单元格之间的空白，默认 2 像素

width

像素值或百分比

规定表格的宽度

源码示例：

<!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>
    <table align="center" border="1" cellpadding="30" cellspacing="0" width="500" height="50">
        <tr> <!-- 用于定义表格中的一行-->
        <th>   姓名   </th> <th>   班级   </th> <th>  总成绩  </th> <th>  排名  </th> 
        </tr>  
        <tr>
            <td>   小红   </td> <td>   一班   </td> <td>   749 </td> <td>    1  </td>
        </tr>    
        <tr>
            <td>   小橙   </td> <td>   二班   </td> <td>   700 </td> <td>    2  </td>
        </tr>
    </table>
</body>
</html>

注意：

1.如果不设置align属性值，则默认表格靠浏览器窗口的左边。

2.cellpadding 属性表示文本与边框之间的距离，cellspacing 属性表示单元格与单元格之间的距离

3.表格的这些属性都必须写到表格标签<table>标签里面。

1.4小结案例

<!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>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="650" height="60"> 
        <tr> 
            <th> 排名 </th> 
            <th> 剧名 </th> 
            <th> 热度 </th> 
            <th> 豆瓣评分 </th> 
            <th> 相关链接 </th>
        </tr>
        <tr> 
            <td> 1 </td> 
            <td> 苍兰诀 </td> 
            <td> 80.41 </td> 
            <td> 7.9 </td> 
            <td> <a href="https://baike.baidu.com/item/苍兰诀/53935024?fr=aladdin"> 百度百科 </a>   
                 <a href="images/苍兰诀.webp"> 图片 </a>   
                 <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=674913"> 贴吧 </a>
            </td>
        </tr>
        <tr> 
            <td> 2 </td> 
            <td> 冰雨火 </td> 
            <td> 80.01 </td> 
            <td> 7.3 </td> 
            <td> 
                 <a href="https://baike.baidu.com/item/冰雨火/24256929?fr=aladdin"> 百度百科 </a>   
                 <a href="images/冰雨火.webp"> 图片 </a>   
                 <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=1958739"> 贴吧 </a>
            </td>
        </tr>
        <tr> 
            <td> 3 </td> 
            <td> 沉香如屑 沉香重华 </td> 
            <td> 79.02 </td> 
            <td> 5.9 </td> 
            <td> 
                 <a href="https://baike.baidu.com/item/沉香如屑/19835449?fr=aladdin"> 百度百科 </a>   
                 <a href="images/沉香如屑.webp"> 图片 </a>   
                 <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=641437"> 贴吧 </a>
            </td> 
        </tr>
        <tr> 
            <td> 4 </td> 
            <td> 罚罪 </td> 
            <td> 77.05 </td> 
            <td> 7.0 </td> 
            <td> 
                <a href="https://baike.baidu.com/item/罚罪/61874368?fr=aladdin"> 百度百科 </a>   
                <a href="images/罚罪.webp"> 图片 </a>   
                <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=7321738"> 贴吧 </a> 
            </td>
        </tr>
        <tr> 
            <td> 5 </td> 
            <td> 星汉灿烂 月升沧海 </td> 
            <td> 72.80 </td> 
            <td> 7.6 </td> 
            <td>  
                 <a href="https://baike.baidu.com/item/星汉灿烂/24583310?fr=aladdin"> 百度百科 </a>   
                 <a href="images/星汉灿烂.webp"> 图片 </a>   
                 <a href="https://tieba.baidu.com/hottopic/browse/hottopic?topic_id=1549016"> 贴吧 </a>
            </td>
        </tr>
    </table>

</body>
</html>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：Linux修改PHP默认环境变量的通用方法！下一篇：html怎么让段落文本两端对齐(html怎么让段落居中)

HTML篇六——（1）

版权声明

作者文章