HTML表格-table

来源:https://www.cnblogs.com/-Clown/archive/2018/07/30/9392591.html
-Advertisement-
Play Games

表格 表格由 <table> 標簽來定義。 每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。 字母 td 指表格數據(table data),即數據單元格的內容。 數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。 例如,要畫出如下表格 ...


表格

表格由 <table> 標簽來定義。

每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。

字母 td 指表格數據(table data),即數據單元格的內容。

數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

例如,要畫出如下表格:

 

分析: 1.分析行,每行是一個tr標簽

    2.從第一行開始,看每行有幾個單元格,幾個單元格就是幾個td標簽

    3.如果是占用空間為1行1列,省略行數,直接為<td></td>。

上圖的代碼如下

 

 1     <body>
 2         <table width="400" height="400" border="2">
 3             <!-- 第1行 -->
 4             <tr>
 5                 <td colspan="4" bgcolor="aqua"></td>
 6             </tr>
 7             <!-- 第2行 -->
 8             <tr>
 9                 <td rowspan="4" bgcolor="antiquewhite"></td>
10                 <td colspan="3" bgcolor="antiquewhite"></td>
11             </tr>
12             <!-- 第3行 -->
13             <tr>
14                 <td rowspan="3" bgcolor="aquamarine"></td>
15                 <td colspan="2" bgcolor="aquamarine"></td>
16             </tr>
17             <!-- 第4行 -->
18             <tr>
19                 <td rowspan="2" bgcolor="bisque"></td>
20                 <td bgcolor="bisque"></td>
21             </tr>
22             <!-- 第5行 -->
23             <tr>
24                 <td></td>
25             </tr>
26         </table>
27     </body>

 

 

 2018-07-30

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 系統路徑 文件操作 資源文件assets和RW res/raw:文件會被映射到R.java文件中,訪問的時候直接通過資源ID訪問,沒有有目錄結構 assets:不會映射到R.java文件中,通過AssetManager來訪問,能有目錄結構 從資源文件中獲取Bitmap ...
  • ios的viewcontroller生命周期是 init -> loadView -> viewDidLoad -> viewWillAppear -> viewDidAppear -> viewWillDisappear -> viewDidAppear -> viewDidUnload -> d ...
  • Preface Android中,Client測量和計算佈局,SurfaceFlienger(server)用來渲染繪製界面,client和server的是通過匿名共用記憶體(SharedClient)通信。 每個應用和SurfaceFlienger之間都會創建一個SharedClient,一個Sha ...
  • 一,效果圖。 二,代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, ...
  • 本文講述JavaScript中類繼承的實現方式,並比較實現方式的差異。 一、何為繼承 繼承,是子類繼承父類的特征和行為,使得子類對象具有父類的實例域和方法。 繼承是面向對象編程中,不可或缺的一部分。 1.1 優點 父類可以為子類提供通用的屬性,而不必因為增加功能,而逐個修改子類的屬性 同上 子類在父 ...
  • React路由 React推了兩個版本 一個是react-router 一個是react-router-dom 個人建議使用第二個 因為他多了一個Link組件 Npm install react-router-dom 1.引入 上邊兩種方法都行,需要註意的是第二種,下邊的便簽的寫成<HashRout ...
  • 23:01:17 react腳手架搭建 (個人用的是webstorm,所以分享下webstorm中的創建react腳手架項目的方法) 1.創建新項目(前提是下載nodejs環境) 2.下載好在webstorm中右鍵自己創建的項目目錄,菜單中會出現一個命令行工具,點進去 然後 npm start 開啟 ...
  • 1.react 組件創建 首先要引入以下三個庫: react.min.js - React 的核心庫 react-dom.min.js - 提供與 DOM 相關的功能 babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 R ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...