HTML table基礎

lucas 發布于2019-08-01 17:06 / 2167人閱讀

摘要：前言中的標簽表示表格數據通過二維數據表來展示信息。后語第一次是用寫文章就發現可以將剪切板的圖片粘貼添加到文章，很驚喜。之前使用的是作業部落，會員才能上傳圖片。

前言

HTML 中的

標簽表示表格數據----通過二維數據表來展示信息。

表格相關的HTML標簽：

表格標簽的編寫順序：

定義表格每個表格從

開始

用于對表格的列進行組合，以方便對列設置屬性，可選

用于為表格的列設置屬性，可選

用于對表格的表頭內容進行分組，可選

用于對表格的頁腳、腳注或表注進行分組，可選

用于組合表格的主體內容，可選

定義表格中的行每個表格行從開始

、以及很少被使用

表格實驗1 . 無邊框表格

定義表格標題，可選（可寫可不寫，根據需要）
定義單元格每個單元格從	開始	定義表頭單元格

100	200	300
400	500	600

2 . 普通邊框表格

3 . 粗邊框表格



  First
  Row
   

  Second
  Row

4 . 為表格設置cellpadding屬性



  First
  Row
   

  Second
  Row

5 . 為表格設置cellspacing屬性



  First
  Row
   

  Second
  Row



  First
  Row
   

  Second
  Row

6 . 為表格設置border-collapse屬性



  First 
  Row
   

  Second
  Row

7 . 為表格設置frame屬性


  
    Month
    Savings
  
  
    January
    $100

Month	Savings
January	$100


  
    Month
    Savings
  
  
    January
    $100

Month	Savings
January	$100


  
    Month
    Savings
  
  
    January
    $100

Month	Savings
January	$100

8 . 表格跨列、跨行




  姓名
  電話


  Bill Gates
  555 77 854
  555 77 855







  姓名
  Bill Gates


  電話
  555 77 854


  555 77 855

姓名	電話
Bill Gates	555 77 854	555 77 855

姓名	Bill Gates
電話	555 77 854
555 77 855

9 . 使用為列設置屬性

為行設置屬性? 設置即可。


  
  
  
  
    ISBN
    Title
    Price
  
  
    3476896
    My first HTML
    $53
  
  
    2489604
    My first CSS
    $47

ISBN	Title	Price
3476896	My first HTML	$53
2489604	My first CSS	$47


  
  
  
    ISBN
    Title
    Price
  
  
    3476896
    My first HTML
    $53
  
  
    2489604
    My first CSS
    $47

ISBN	Title	Price
3476896	My first HTML	$53
2489604	My first CSS	$47

后語

第一次是用 segmentfault 寫文章就發現可以將剪切板的圖片粘貼（Ctrl + V）添加到文章，很驚喜。之前使用的是作業部落，會員才能上傳圖片。

參考資料：
【1】W3school http://www.w3school.com.cn/ta...
【2】MDN https://developer.mozilla.org...

GPU云服務器云服務器 html基礎 html代碼基礎 html基礎代碼 html基礎教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50949.html

CSS基礎篇--你知道的display的值有多少？用了多少？

摘要：與屬性的值不同，其不為被隱藏的對象保留其物理空間指定對象為內聯元素。指定對象作為塊元素級的表格。類同于標簽指定對象作為表格行組。伸縮盒過渡版本將對象作為彈性伸縮盒顯示。伸縮盒最新版本新增屬性可能存在描述錯誤及變更，僅供參考。它的語法如下： display：none | inline | block | list-item | inline-block | table | inline...

wangdai 2019-08-28 18:17 評論0 收藏0
HTML基礎系列

摘要：標記語言，網頁制作的第一步。什么是呢查百度基礎語法常用標簽是超文本標記語言，不用編譯，直接在瀏覽器中執行，是一個文本文件。長按下方二維碼可關注，歡迎分享，置頂尤佳。 HTML標記語言，網頁制作的第一步。什么是HTML呢？查百度基礎語法常用標簽 HTML是超文本標記語言，HTML不用編譯，直接在瀏覽器中執行，HTML是一個文本文件。 HTML基本結構，標簽，元素，屬性，注...

huangjinnan 2019-04-22 16:12 評論0 收藏0
回到基礎：如何用原生 DOM API 生成表格

摘要：接下來該填表了生成行和單元格為了填充表格可以遵循同樣的方法，但這次我們需要迭代數組中的每個對象。對于每個對象，我們可以使用生成單元格。翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章怎樣用原生 JavaScript 生成表格需？本文告訴你答案！...

Sunxb 2019-08-26 13:34 評論0 收藏0
WEB基礎之HTML的各個標簽的默認樣式

摘要：在中，了解各個標簽的默認樣式，有助于理解代碼的表現，也有利于精簡代碼。在HTML中，了解各個標簽的默認樣式，有助于理解代碼的表現，也有利于精簡代碼。(??? ? ???) head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...

ThinkSNS 2019-08-29 11:15 評論0 收藏0
WEB基礎之HTML的各個標簽的默認樣式

摘要：在中，了解各個標簽的默認樣式，有助于理解代碼的表現，也有利于精簡代碼。在HTML中，了解各個標簽的默認樣式，有助于理解代碼的表現，也有利于精簡代碼。(??? ? ???) head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...

Jokcy 2019-08-01 15:41 評論0 收藏0