表格的介紹與實戰(詳細且有案例)

目錄??????????????

表格的主要作用:

表格的基本語法:

表格相關的標簽

合并單元格:

實戰:


  • 表格的主要作用:

表格主要是用來展示數據的,使用表格來展示數據,數據可讀性更好,更加規范

  • 表格的基本語法:

<table>
?<tr>
?<td>單元格內的文字</td>
?...
?</tr>
?...
</table>

1. <table> </table> 是用于定義表格的標簽。
2. <tr> </tr> 標簽用于定義表格中的行,必須嵌套在 <table> </table>標簽中。
3. <td> </td> 用于定義表格中的單元格,必須嵌套在<tr></tr>標簽中。
4. 字母 td 指表格數據(table data),即數據單元格的內容。

?

  • 表格相關的標簽
table表示這是一個表格
th表示表頭,里面的文字會劇中加粗
tr表示表格中的一行
td表示表格中的一個單元格(類似于數據庫中的一個數據),這是一個容器,里面可以填入任意標簽(a標簽,p標簽)

  • 表格相關的屬性

表格標簽這部分屬性我們實際開發我們不常用,后面通過 CSS 來設置.
目的有2個:?
1. 記住這些英語單詞,后面 CSS 會使用.
2. 直觀感受表格的外觀形態

  • 合并單元格:

合并單元格三步曲:
1. 先確定是跨行還是跨列合并。
2. 找到目標單元格. 寫上合并方式 = 合并的單元格數量。比如:<td colspan=“2”></td>。
3. 刪除多余的單元格。
?

  • 實戰:

案例1:?

<!DOCTYPE html>
<html lang="zh_cn"><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 border="1" align="center" whith="800px" height="250px" cellpadding="20px" cellspacing="0px"><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>354</td><td>124</td><td><span><a href="#">貼吧</a></span><span><a href="#">貼吧</a></span><span><a href="#">貼吧</a></span></td></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="./down.jpg"></td><td>354</td><td>124</td><td><span><a href="#">貼吧</a></span><span><a href="#">貼吧</a></span><span><a href="#">貼吧</a></span></td></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="./down.jpg"></td><td>354</td><td>124</td><td><span><a href="#">貼吧</a></span><span><a href="#">貼吧</a></span><span><a href="#">貼吧</a></span></td></tr></tbody></table>
</body></html>

案例2:

<!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><div align="center"><h3 >課程表</h3><table border="1" cellpadding="10px"><tr><th>項目</th><th colspan="5">上課</th><th colspan="2">休息</th></tr><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="4">上午</td><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td><td rowspan="4">休息</td></tr><tr><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td></tr><tr><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td></tr><tr><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td></tr>
<tr><td rowspan="2">下午</td><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td><td rowspan="2">休息</td>
</tr>
<tr><td>語文</td><td>數學</td><td>英語</td><td>英語</td><td>物理</td><td>計算機</td>
</tr>
</table>
</div>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/212230.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/212230.shtml
英文地址,請注明出處:http://en.pswp.cn/news/212230.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

202301209將RK3399的挖掘機開發板在Android10下設置系統默認為24小時制

202301209將RK3399的挖掘機開發板在Android10下設置系統默認為24小時制 2023/12/9 22:07 應該也可以適用于RK3399的Android12系統 --- a/frameworks/base/packages/SettingsProvider/res/values/defaults.xml b/frameworks/base/packages/SettingsProvider/res/values/default…

一文搞懂Lombok Plugins使用與原理

目錄 一文搞懂Lombok使用與原理 1.前言2.什么是Lombok3. IntelliJ安裝Lombok3.1通過IntelliJ的插件中心安裝3.2在項目中使用Lombok Plugins 4.Lombok 注解大全說明4.1POJO類常用注解4.2其他注解 5.Lombok常見問題6.總結7.參考 文章所屬專區 超鏈接 1.前言 2.什么是Lombok Lo…

產品創新受贊譽,懌星榮獲2023未來汽車(電子和軟件)創新創業大賽一等獎

2023未來汽車&#xff08;電子和軟件&#xff09;創新創業大賽 11月29日&#xff0c;上海臨港&#xff0c;由中國汽車工程學會和中國&#xff08;上海&#xff09;自由貿易試驗區臨港新片區管理委員會聯合舉辦的“2023未來汽車&#xff08;電子和軟件&#xff09;創新創業大賽…

二叉搜索樹中第K小的元素[中等]

優質博文&#xff1a;IT-BLOG-CN 一、題目 給定一個二叉搜索樹的根節點root&#xff0c;和一個整數k&#xff0c;請你設計一個算法查找其中第k個最小元素&#xff08;從1開始計數&#xff09;。 示例 1&#xff1a; 輸入&#xff1a;root [3,1,4,null,2], k 1 輸出&#x…

RHEL8_Linux硬盤管理

主要介紹Linux磁盤管理 了解分區的概念對硬盤進行分區常見的分區swap分區的管理 1.了解分區的概念 1&#xff09;新的硬盤首先需要對其進行分區和格式化&#xff0c;下面來了解以下硬盤的結構&#xff0c;如圖。 2&#xff09;硬盤的磁盤上有一個個圈&#xff0c;每兩個圈組…

JVM虛擬機系統性學習-類加載子系統

類加載子系統 類加載的時機 類加載的時機主要有 4 個&#xff1a; 遇到 new、getstatic、putstatic、invokestatic 這四條字節碼指令時&#xff0c;如果對應的類沒有初始化&#xff0c;則要先進行初始化 new 關鍵字創建對象時讀取或設置一個類型的靜態字段時&#xff08;被 …

javaSwing酒店管理系統

一、 使用方法&#xff1a; 在使用前&#xff0c;需要到druid.properties 配置文件中&#xff0c;修改自己對應于自己數據庫的屬性&#xff1b;如用戶名&#xff0c;密碼等 driverClassNamecom.mysql.cj.jdbc.Driver urljdbc:mysql:///hotel?useUnicodetrue&characterEn…

midwayjs從零開始創建項目,連接mikro-orm框架(必須有java的springboot基礎)

前言&#xff1a; 我一直都是用java的springboot開發項目&#xff0c;然后進來新公司之后&#xff0c;公司的后端是用node.js&#xff0c;然后框架用的是 midwayjs &#xff0c;然后網上的資料比較少&#xff0c;在此特地記錄一波 文檔&#xff1a; 1.官方文檔&#xff1a;介紹…

vue 前端crypto-js 如何實現加密解密

npm 安裝 crypto-js 引用 import CryptoJS from "crypto-js"; 或者 import CryptoJS from "crypto-js"; //秘鑰 var aesKey "s10dfc3321ba59abbe123057f20f883e"; //將秘鑰轉換成Utf8字節數組 var key CryptoJS.enc.Utf8.parse(aesKey); /…

Spring Boot 3.0 : 集成flyway數據庫版本控制工具

目錄 Spring Boot 3.0 : 集成flyway數據庫版本控制工具flyway是什么為什么使用flyway主要特性支持的數據庫&#xff1a; flyway如何使用spring boot 集成實現引入依賴配置sql版本控制約定3種版本類型 運行SpringFlyway 8.2.1及以后版本不再支持MySQL&#xff1f; 個人主頁: 【?…

常見web漏洞的流量分析

常見web漏洞的流量分析 文章目錄 常見web漏洞的流量分析工具sql注入的流量分析XSS注入的流量分析文件上傳漏洞流量分析文件包含漏洞流量分析文件讀取漏洞流量分析ssrf流量分析shiro反序列化流量分析jwt流量分析暴力破解流量分析命令執行流量分析反彈shell 工具 攻擊機受害機wi…

Unity DOTS中的baking(一) Baker簡介

Unity DOTS中的baking&#xff08;一&#xff09; Baker簡介 baking是DOTS ECS工作流的一環&#xff0c;大概的意思就是將原先Editor下的GameObject數據&#xff0c;全部轉換為Entity數據的過程。baking是一個不可逆的過程&#xff0c;原先的GameObject在運行時不復存在&#x…

leetcode 股票DP系列 總結篇

121. 買賣股票的最佳時機 你只能選擇 某一天 買入這只股票&#xff0c;并選擇在 未來的某一個不同的日子 賣出該股票。 只能進行一次交易 很簡單&#xff0c;只需邊遍歷邊記錄最小值即可。 class Solution { public:int maxProfit(vector<int>& prices) {int res …

Vue-安裝及安裝vscode相應插件

安裝Vue 安裝nodejs&#xff0c; 地址&#xff1a;https://nodejs.org/en 下載后直接安裝。 安裝后重新打開命令行工具&#xff0c;輸入 node -v PS C:\Users\zcl36> node -v v20.10.0 2. 安裝vue包npm install -g vue/cli安裝之后&#xff0c;你就可以在命令行中訪問 vue…

【git】關于git二三事

文章目錄 前言一、創建版本庫1.通過命令 git init 把這個目錄變成git可以管理的倉庫2.將修改的內容添加到版本庫2.1 git add .2.2 git commit -m "Xxxx"2.3 git status 2.4 git diff readme.txt3.版本回退3.1 git log3.2 git reset --hard HEAD^ 二、理解工作區與暫存…

操作系統內部機制學習

切換線程時需要保存什么 函數需要保存嗎&#xff1f;函數在Flash上&#xff0c;不會被破壞&#xff0c;無需保存。函數執行到了哪里&#xff1f;需要保存嗎&#xff1f;需要保存。全局變量需要保存嗎&#xff1f;全局變量在內存上&#xff0c;無需保存。局部變量需要保存嗎&am…

Leetcode—337.打家劫舍III【中等】

2023每日刷題&#xff08;五十二&#xff09; Leetcode—337.打家劫舍III 算法思想 實現代碼 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(null…

I.MX6ULL_Linux_驅動篇(46)linux LCD驅動

LCD 是很常用的一個外設&#xff0c;在Linux 下LCD 的使用更加廣泛&#xff0c;在搭配 QT 這樣的 GUI 庫下可以制作出非常精美的 UI 界面。本章我們就來學習一下如何在 Linux 下驅動 LCD 屏幕。 Linux 下 LCD 驅動簡析 Framebuffer 設備 先來回顧一下裸機的時候 LCD 驅動是怎…

前端入門:HTML初級指南,網頁的簡單實現!

代碼部分&#xff1a; <!DOCTYPE html> <!-- 上方為DOCTYPE聲明&#xff0c;指定文檔類型為HTML --> <html lang"en"> <!-- html標簽為整個頁面的根元素 --> <head> <!-- title標簽用于定義文檔標題 --> <title>初始HT…

單點登錄方案調研與實現

作用 在一個系統登錄后&#xff0c;其他系統也能共享該登錄狀態&#xff0c;無需重新登錄。 演進 cookie → session → token →單點登錄 Cookie 可以實現瀏覽器和服務器狀態的記錄&#xff0c;但Cookie會出現存儲體積過大和可以在前后端修改的問題 Session 為了解決Co…