HTML入门练习案例--表格

最新推荐文章于 2023-02-24 23:36:43 发布

thorn豆豆

最新推荐文章于 2023-02-24 23:36:43 发布

阅读量365

点赞数 1

分类专栏： HTML入门练习案例文章标签： html

本文链接：https://blog.csdn.net/qq_45067479/article/details/109153647

版权

HTML入门练习案例专栏收录该内容

0 篇文章 0 订阅

订阅专栏

学习目标

（1）熟悉并掌握表格的基本语法：

 <!-- <table></table>时用于定义表格的标签 -->
    <table>
        <!-- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中 -->
        <tr>
            <!-- <td></td>是定义在表格中的单元格，嵌套在 <tr></tr>标签中-->
            <td>单元格里面的文字</td>
            ...
        </tr>
        ...
    </table>

（2）熟悉并掌握表头单元格标签的基本语法：

    <tr>
           <!-- <th></th>标签用于表示表格的表头部分，会文字加粗并居中 -->
           <th>表头部分，table head 的缩写</th>
       </tr>
   </table>

（3）熟悉并掌握表格的结构标签：
可将表格分为：表格头部区域"thead"，表格的主体区域“tbody”
（4）了解表格属性align border cellpadding cellspacing width height用法（初步了解会使用即可，后续css会学更全面）
（5）案例练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说排名</title>
</head>

<body>
    <!-- 用于定义表格的表格标签<table> -->
    <table align="center" border="1" cellpadding="2" cellspacing="0">
        <!-- 表头头部区域<thead> -->
        <thead>
            <!-- <tr> 行标签-->
            <tr>
                <!-- <th>表头标签 -->
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <!-- 表头主体区域<tbody> -->
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/上升.gif" hight="20" width='40'></td>
                <td>345</td>
                <td>4455</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/下降.gif" hight="20" width='40'></imgsrc>
                </td>
                <td>234</td>
                <td>3344</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>甄嬛传</td>
                <td><img src="images/上升.gif" hight="20" width='40'></td>
                <td>123</td>
                <td>1122</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a> </td>
            </tr>
        </tbody>

    </table>
    <table>

</body>

</html>

thorn豆豆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门练习案例--表格

学习目标（1）熟悉并掌握表格的基本语法：  <table>  <tr> <!-- <td></td>是定义在表格中的单元
复制链接

扫一扫