HTML标签之表格标签和表格案例

表格标签的使用案例

<!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> 是用于定义表格的标签。
        <tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中。
        <td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr> 标签中.
        字母 td 指表格数据（table data），即数据单元格的内容。
        <th> 标签表示HTML表格的表头部分，里面的文本内容会加粗居中显示
     -->
     <table>
        <tr><th>姓名</th><th>性别</th> <th>年龄</th></tr>
        <tr><td>罗小黑</td><td>男</td> <td>21</td></tr>
        <tr><td>胡歌</td><td>男</td> <td>27</td></tr>
        <tr><td>刘亦菲</td><td>女</td> <td>21</td></tr>
        <tr><td>赵丽颖</td><td>女</td> <td>26</td></tr>
         
     </table>
     <!-- 
         align           left、center、right     规定表格相对周围元素的对齐方式
         border          1或“”                   规定表格单元是否拥有边框，默认为“”，表示没有边框
         cellpadding     像素值                   规定单元边沿与其内容之间的空白，默认1像素
         cellspacing     像素值                   规定单元格之间的空白，默认2像素
         width           像素值或百分比            规定表格的宽度
      -->
      <table align="center" border="1" cellpadding="20">
        <tr><th>姓名</th><th>性别</th> <th>年龄</th></tr>
        <tr><td>罗小黑</td><td>男</td> <td>21</td></tr>
        <tr><td>胡歌</td><td>男</td> <td>27</td></tr>
        <tr><td>刘亦菲</td><td>女</td> <td>21</td></tr>
        <tr><td>赵丽颖</td><td>女</td> <td>26</td></tr>
         
     </table>

     <table align="left" border="1" cellspacing="0" width="300" height="200">
        <tr><th>姓名</th><th>性别</th> <th>年龄</th></tr>
        <tr><td>罗小黑</td><td>男</td> <td>21</td></tr>
        <tr><td>胡歌</td><td>男</td> <td>27</td></tr>
        <tr><td>刘亦菲</td><td>女</td> <td>21</td></tr>
        <tr><td>赵丽颖</td><td>女</td> <td>26</td></tr>
         
     </table>
</body>
</html>

在这里插入图片描述

使用表格标签实现一个关于电影关键字和表格内图片展示

<!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" cellspacing="0" width="500" height="200" border="1">
        <tr>
            <th>排名</th>
            <th>关键字</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" width="25"></td>
            <td>333</td>
            <td>222</td>
            <td><a href="https://cn.bing.com/">必应</a>  <a href="http://www.baidu.com/">百度</a>  <a href="#">图片</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" width="25"></td>
            <td>333</td>
            <td>222</td>
            <td><a href="https://cn.bing.com/">必应</a>  <a href="http://www.baidu.com/">百度</a>  <a href="#">图片</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="https://cdn.jsdelivr.net/gh/luoxiaohei520/MyPics@img/img/202404021941672.png" width="25"></td>
            <td>333</td>
            <td>222</td>
            <td><a href="https://cn.bing.com/">必应</a>  <a href="http://www.baidu.com/">百度</a>  <a href="#">图片</a></td>
        </tr>
    </table>
</body>
</html>

表格标签合并单元格

<!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>
    <!-- 
        跨行合并：rowspan=“合并单元格的个数”    把最上侧单元格为目标单元格，写合并代码
        跨列合并：colspan=“合并单元格的个数”    把最左侧单元格为目标单元格，写合并代码
     -->

     <!-- 
         合并单元格的三部曲
         1.先确定是跨行还是跨列合并。
         2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>
         3.删除多余的单元格
      -->
     <table width="500" height="250" 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/510504.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

yolov7代码 | model.named_models

yolov7代码 | model.named_models

文章目录 前言1. print(model)2. print(model.named_models)2.1 print(name)2.2 print(module)2.3 print(f"{name}:: {module}") 3. hasattr(module, weight) 前言 了解model.named_models&#xff0c;为剪枝做准备。 剪枝有一些层如果你不想剪掉&#xff0c;那就用…
阅读更多...
IP代理池赋能Python网络爬虫

IP代理池赋能Python网络爬虫

文章目录 什么是IP代理池代理服务器IP代理池的作用IP代理池的构建IP代理池的管理 相关案例IP代理在爬虫中的运用IP代理在数据收集中的运用IP代理在反爬虫中的运用 结语 什么是IP代理池 IP代理池是一个存储了多个可用代理IP地址的资源池&#xff0c;用于在网络爬虫、数据采集、…
阅读更多...
PS从入门到精通视频各类教程整理全集，包含素材、作业等（6）复发

PS从入门到精通视频各类教程整理全集，包含素材、作业等（6）复发

PS从入门到精通视频各类教程整理全集&#xff0c;包含素材、作业等 最新PS以及插件合集&#xff0c;可在我以往文章中找到 由于阿里云盘有分享次受限制和文件大小限制&#xff0c;今天先分享到这里&#xff0c;后续持续更新 橘子老师章节9-17图像的调色 等文件 https://www.a…
阅读更多...
网站备案进度

网站备案进度

1.网站开通后&#xff0c;请在网站首页底部中间位置放置您的ICP备案号并链接至"https://beian.miit.gov.cn"。 并在开通之日起30日内登录全国互联网安全管理平台提交公安联网备案申请。获取《公安备案信息填写指南》&#xff0c;或者通过“公安备案助手”协助您完成申…
阅读更多...
文件操作的详序

文件操作的详序

1.为什么使用文件&#xff1f; 如果没有文件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运行程序&#xff0c;是看不到程序的数据的&#xff0c;如果将数据进行持久化的保存…
阅读更多...
【六 （2）机器学习-机器学习建模步骤/kaggle房价回归实战】

【六 （2）机器学习-机器学习建模步骤/kaggle房价回归实战】

一、确定问题和目标&#xff1a; 1、业务需求分析&#xff1a; 与业务团队或相关利益方进行深入沟通&#xff0c;了解他们的需求和期望。 分析业务流程&#xff0c;找出可能的瓶颈、机会或挑战。 思考机器学习如何帮助解决这些问题或实现业务目标。 2、问题定义&#xff1a;…
阅读更多...
四种IP地址的区别

四种IP地址的区别

动态IP、固定IP、实体IP和虚拟IP是计算机网络中常见的IP地址类型&#xff0c;它们在分配方式、稳定性、应用场景等方面存在显著的差异。下面将详细阐述这四种IP地址的区别。 首先&#xff0c;动态IP地址是一种临时分配给设备或主机的可变IP地址。每次设备连接到网络时&#xf…
阅读更多...
4.2作业

4.2作业

使用模板类&#xff0c;实现顺序栈 #include <iostream> #include <iomanip>using namespace std;template <typename T>class stack{public:T *data;T top;T MAXsizeof;//操作函数stack(int buf 100); //栈的建立bool push(const T a); //出栈bool pop(); …
阅读更多...
rhce复习1

rhce复习1

虚拟机初始化配置 bash 1、安装系统&#xff0c;选择对应的linux版本&#xff0c;阿里云镜像站点、163镜像站点等等 2、装好系统后&#xff0c;先配置网络&#xff1a;ip地址&#xff0c;掩码&#xff0c;网关&#xff0c;dns域名解析服务器 [rootlocalhost ~]# nmtui [rootlo…
阅读更多...
3.写一个char类型的字符数组，对该数组访问越界时抛出异常，并做处理。

3.写一个char类型的字符数组，对该数组访问越界时抛出异常，并做处理。

#include <iostream>using namespace std;char arr[10]"12345678"; void show(int i) {if(i>10){throw int(2);}cout << arr[i] <<endl; } int main() {int i;cin >> i;try {show(i);} catch (int) {cout << "越界" <…
阅读更多...
SSM框架学习——工厂模式、Spring核心容器与Bean

SSM框架学习——工厂模式、Spring核心容器与Bean

工厂模式、核心容器与Spring Bean 工厂模式 工厂模式是Java中常用的一种设计模式&#xff0c;这种类型的设计模式属于创建型模式。说白了在代码层面就是取消了new的使用。 工厂模式有三种&#xff1a; 简单工厂模式工厂方法模式抽象工厂模式 举个例子&#xff0c;我们去买…
阅读更多...
无缝投屏技巧：怎样将Windows电脑屏幕共享到安卓手机？

无缝投屏技巧：怎样将Windows电脑屏幕共享到安卓手机？

使用屏幕共享技术的好处是多方面的。首先&#xff0c;它为远程协助提供了极大的便利。当用户遇到电脑操作难题时&#xff0c;技术支持人员可以远程查看用户的屏幕&#xff0c;实时指导解决问题&#xff0c;就像他们身临其境一样。其次&#xff0c;这种技术也为教育和培训带来了…
阅读更多...
时序预测 | Python实现VMD-CNN-LSTM时间序列预测

时序预测 | Python实现VMD-CNN-LSTM时间序列预测

时序预测 | Python实现VMD-CNN-LSTM时间序列预测 目录 时序预测 | Python实现VMD-CNN-LSTM时间序列预测预测效果基本介绍模型描述代码设计预测效果 基本介绍 VMD-CNN-LSTM 是一种混合深度学习模型，结合了变分模态分解（VMD）、卷积神经网络（CNN）和长短期记忆网络（LSTM）的…
阅读更多...
C#中值类型与引用类型的存储

C#中值类型与引用类型的存储

目录 值对象与引用对象的存储 引用对象的成员存储 值对象与引用对象的存储 数据项的类型定义了存储数据需要的内存大小及组成该类型的数据成员。类型还决定了对象在内存中的存储位置——栈或堆。 C#中类型分为两种&#xff1a;值类型和引用类型&#xff0c;这两种类型的对象…
阅读更多...
“省钱有道”的太平鸟，如何真正“高飞”？

“省钱有道”的太平鸟，如何真正“高飞”？

衣食住行产业中&#xff0c;服装品类消费弹性较大、可选属性较强&#xff0c;其发展可以显著反映当前的经济温度。 根据国家统计局数据&#xff0c;2023年1-12月&#xff0c;我国限额以上单位服装类商品零售额累计10352.9亿元&#xff0c;同比增长15.4%&#xff0c;增速比2022…
阅读更多...
LLMs之DBRX：DBRX的简介、安装和使用方法、案例应用之详细攻略

LLMs之DBRX：DBRX的简介、安装和使用方法、案例应用之详细攻略

LLMs之DBRX&#xff1a;DBRX的简介、安装和使用方法、案例应用之详细攻略 导读&#xff1a;2024年3月27日(美国时间)&#xff0c;DBRX是Databricks推出的一款新型开源大语言模型&#xff0c;主要特征和优势总结如下&#xff1a; >> 表现优异&#xff1a;DBRX在各类自然语…
阅读更多...
Pixelmator Pro：专业级图像编辑，触手可及mac/win版

Pixelmator Pro：专业级图像编辑，触手可及mac/win版

Pixelmator Pro是一款功能强大的图像编辑软件&#xff0c;专为Mac操作系统设计。它拥有直观的界面和丰富的工具&#xff0c;能够满足用户各种图像处理需求。 Pixelmator Pro软件获取 首先&#xff0c;Pixelmator Pro支持多种文件格式&#xff0c;包括JPEG、PNG、GIF、BMP、TIF…
阅读更多...
投稿指南【NO.12_9】【极易投中】核心期刊投稿（现代电子技术）

投稿指南【NO.12_9】【极易投中】核心期刊投稿（现代电子技术）

近期有不少同学咨询投稿期刊的问题&#xff0c;大部分院校的研究生都有发学术论文的要求&#xff0c;少部分要求高的甚至需要SCI或者多篇核心期刊论文才可以毕业&#xff0c;但是核心期刊要求论文质量高且审稿周期长&#xff0c;所以本博客梳理一些计算机特别是人工智能相关的期…
阅读更多...
算法第三十八天-故障键盘

算法第三十八天-故障键盘

故障键盘 题目要求 解题思路 提示&#xff1a;把反转看成是往字符串的头部添加字符。 具体来说&#xff1a; 如果当前处于「往字符串尾部添加字符」的状态&#xff0c;那么遇到 i 后&#xff0c;改成「往字符串头部添加字符」的状态。 如果当前处于「往字符串头部添加字符」…
阅读更多...
基于8086贪吃蛇游戏系统方恨设计

基于8086贪吃蛇游戏系统方恨设计

**单片机设计介绍&#xff0c;基于8086贪吃蛇游戏系统方恨设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于8086的贪吃蛇游戏系统设计是一个结合了微处理器控制、游戏逻辑以及图形显示技术的综合性项目。该系统旨在通过8086微处理器…
阅读更多...
最新文章

Copyright @ 2022~2023