HTML篇六——（2）

emotion lv.1

发布时间：2022-09-29 20:07:06 284

一、表格标签

表格标签的基本语法、表头单元格标签及表格相关属性见：https://editor.csdn.net/md/?articleId=127008434

1.5 表格结构标签

使用场景：因为表格可能会很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

标签表示表格的头部区域，用于定义表格的头部，内部必须要有标签，一般位于第一行。

标签表示表格的主体区域，用于定义表格的主体，主要用于放数据本体。

注意：表示的是表头单元格，表示的是表头区域，后者范围比前者范围大；

代码示例：


<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"> 
        <thead>
            <tr> 
                <th> 排名 th> 
                <th> 剧名 th> 
                <th> 热度 th> 
                <th> 豆瓣评分 th> 
                <th> 相关链接 th>
            tr>
        thead>
        <tbody>
            <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>
        tbody>
    table>    
body>
html>

HTML篇六——（2）_百度

结构看着更加清晰~

注意：表格结构标签一定要放置于

中。

1.6 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

1.6.1 合并单元格方式及目标单元格

1.合并单元格方式 1）跨行合并：rowspan="合并单元格的个数"2）跨列合并：colspan="合并单元格的个数"

2.目标单元格

1）跨行：最上侧单元格为目标单元格，写合并代码

2）跨列：最左侧单元格为目标单元格，写合并代码

1.6.2 合并单元格步骤

合并单元格三部曲：

1.先确定是跨行还是跨列合并。

2.找到目标单元格，写上合并方式=合并的单元格数量，如：。

3.删除多余的单元格。代码示例：


<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 border="1" cellspacing="0" width="300" height="400">
        <tr>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
            <td>td>
        tr>
    table> <br />

        
        <table border="1" cellspacing="0" width="300" height="400">
            <tr>
                <td colspan="2">td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td  rowspan="2">td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
        table>     
body>
html>

HTML篇六——（2）_百度_02

文章来源： https://blog.51cto.com/u_13354745/5708716

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。