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

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

作者:互联网

文章目录


1. 表格基础语法

  1. table用于声明表格
  2. tr(row)用于定义行
  3. 在每一行中有许多的单元格,使用td或者th表示
  4. th(head)主要用于表示标题行(首行)
  5. align = center设置表格在网页中的位置
  6. cellpadding设置表格单元格边框间距离,如默认的话会有复边
  7. 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>

测试效果

1


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>

测试效果

2


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>

测试效果

3


写在最后

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

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

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