首页 > 其他分享> > HTML(Basic) Chapter2(Pink) 表格基础知识

HTML(Basic) Chapter2(Pink) 表格基础知识

2021-07-13 16:33:40 作者：互联网

文章目录

1. 表格基础语法
2. 示例
写在最后

1. 表格基础语法

table用于声明表格
tr（row）用于定义行
在每一行中有许多的单元格，使用td或者th表示
th（head）主要用于表示标题行（首行）
align = center设置表格在网页中的位置
cellpadding设置表格单元格边框间距离，如默认的话会有复边
tbody,thead用于声明表格的头部和尾部，使得表格更具有结构

2. 示例

文件内部目录

文件夹

Eg1: 表格基本语法

源代码

<!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>Document</title>
</head>
<body>
    <!-- 这些属性要写到表格的标签<table>中去 -->
    <table align="center" border="1" cellpadding = "20" cellspacing = "0" width = "500" height = "250">
        <tr>
            <th>姓名</th> <th>性别</th> <th>年龄</th>
        </tr>

        <tr>
            <td>刘德华</td> <td>男</td> <td>56</td>
        </tr>

        <tr>
            <td>张学友</td> <td>男</td> <td>57</td>
        </tr>

        <tr>
            <td>郭富城</td> <td>男</td> <td>51</td>
        </tr>
    </table>
</body>
</html>

测试效果

Eg2: 小说排行榜

源代码

<!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>Document</title>
</head>
<body>
    <table align="center" width="500" height = "250"  border="1" cellspacing = "0">

        <!-- thead里面必须有tr标签，tbody用于放置数据主体 -->

        <thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        </thead> 

        <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">贴百科</a> </td>
        </tr>

        <tr>
            <td>2</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">百科</a> </td>
        </tr>

        <tr>
            <td>3</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> </td>
        </tr>

        <tr>
            <td>4</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">贴吧</a> </td>
        </tr>

        <tr>
            <td>5</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">贴百科</a> </td>
        </tr>

        <tr>
            <td>6</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td><a href="www.baidu.com">贴吧</a> <a href="www.baidu.com">图片</a> <a href="www.baidu.com">贴百科</a> </td>
        </tr>
        </tbody>

    </table>
</body>
</html>

测试效果

Eg3: 合并单元格

源代码

<!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>Document</title>
</head>
<body>
    <!-- 合并单元格的方式 rowspan，colspan 跨行与跨列 -->

    合并单元格的三部曲：
    1.确定跨行合并还是跨列合并
    2.找到单元格，写上合并方式如td colspan = "2"
    3.删除多余的单元格

    <table width = "500" height = "249" border="1" cellspacing = "0" >
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>

        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            
            <td></td>
            <td></td>
        </tr>   

    </table>

</body>
</html>

测试效果

写在最后

注:上述笔记均来自黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+web前端视频教程这一课程的学习记录，主要供自己的学习分享

各位看官，都看到这里了，麻烦动动手指头给博主来个点赞8，您的支持作者最大的创作动力哟！＜（＾－＾）＞
才疏学浅，若有纰漏，恳请斧正
本文章仅用于各位同志作为学习交流之用，不作任何商业用途，若涉及版权问题请速与作者联系，望悉知

标签：Pink,123,鬼吹灯,表格,单元格,456,Chapter2,HTML,源代码
来源： https://blog.csdn.net/LeungSr/article/details/118702706