2. 程式人生 > 其它 >HTML基礎（三）-HTML標籤（表格標籤）

HTML基礎（三）-HTML標籤（表格標籤）

阿新 • • 發佈：2021-07-01

5.5 表格標籤

表格由一系列標籤組合而成

  1. table：表格

  • 屬性：border用於設定邊框粗細，cellspacing用於設定單元格的間距（0為無間距）

  1. tr：table row，表示table的行

  • 編寫在table標籤中，作為table標籤的子標籤

  1. td：table data，表示table的列

  • 編寫在tr標籤中，作為tr標籤的子標籤

  1. th：table head，表示table的表頭

  • 編寫在tr標籤中，作為tr標籤的子標籤，與td使用方法一樣，但是文字會加粗並且居中顯示

5.表格中可以在td或者th中新增跨行（rowspan）和跨列（colspan）的列屬性，從而繪製出不同的表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標籤</title>
</head>
<body>
    <!-- 3行4列的表格 -->
    <h1>-----3行4列的表格-----</h1>
    <h2>table row(tr)：表格的行，table data(td)：表格資料</h2>
    <h2>1、border表示給表格加邊界，數值表示粗細大小</h2>
    <table border="1">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>   
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
    </table>
    
    <h2>2、cellspacing="0"表示表格間距為0</h2>
    <table border="1" cellspacing="0">
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>   
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
    </table>
    
    <h2>3、成績單跨列顯示：colspan="列數"，表示當前td佔用兩個td的寬</h2>
    <table border="1" cellspacing="0" width="200">
        <tr>
            <td colspan="2">成績單</td>
        </tr>
        <tr>
            <td>語文</td>
            <td>88</td>
        </tr>
        <tr>
            <td>數學</td>
            <td>99</td>
 

</tr>
</table>
    
<h2>4、成績單跨行顯示：rowspan="行數"，表示當前td佔用兩個td的高</h2>
<table border="1" cellspacing="0" width="200">
　　<tr>
　　　　<td colspan="3">成績單</td>
　　</tr>
　　<tr>
　　　　<td rowspan="2">哪吒</td>
　　　　<td>語文</td>
　　　　<td>88</td>
　　</
 
tr>
　　<tr>
　　　　<td>數學</td>
　　　　<td>99</td>
　　</tr>
</table>
    
<h2>5、練習1   補充：align="center"表示居中</h2>
<img alt="圖片載入失敗" src="test1.jpg"><br>
<h3>輸出結果如下：</h3>
<table border="1" cellspacing="0">
　　<tr>
　　　　<td colspan="2" align="center">1-1</td>
　　　　<td rowspan="2">1-3</td>
　　</tr>
　　<tr>
　　　　<td rowspan="2">2-1</td>
　　　　<td>2-2</td>
　　</tr>
　　<tr>
　　　　<td colspan="2" align="center">3-2</td>
　　</tr>
</table>
    
<h2>練習2：購物車   補充： table head(td)：和td一樣，只不過是文字加粗居中</h2>
<img alt="載入圖片失敗" src="test2.jpg">
<table border="1" cellspacing="0">
　　<tr>
　　　　<th>編號</th>
　　　　<th>名稱</th>
　　　　<th>價格</th>
　　</tr>
　　<tr>
　　　　<td>1</td>
　　　　<td>羅技滑鼠</td>
　　　　<td align="center">99</td>
　　</tr>
　　<tr>
　　　　<td>2</td>
　　　　<td>雷蛇鍵盤</td>
　　　　<td align="center">199</td>
　　</tr>
　　<tr>
　　　　<th colspan="2">總價：</th>
　　　　<td>￥298</td>
　　</tr>
</table>
</body>
</html>

顯示效果如下：

相關推薦

洛谷 P1231 教輔的組成 （三分圖匹配，裂點）

題目 戳我 思路 三分圖匹配，不過看上去裸匈牙利應該能過吧,我們考慮網路流，但是由於一本書只能匹配一次，那麼我們考慮裂點來做流量限制，然後直接跑dinic就好了。

leetcode1473 - 粉刷房子 III（三維動態規劃，如何實現?）

leetcode1473 - 粉刷房子 III（三維動態規劃，如何實現？） 介紹題目題目理解解題分析程式碼致謝題解參考

shell 一鍵安裝k8s叢集（三臺master 也是node節點）

shell一鍵安裝k8s叢集（三臺master 也是node節點） #!/usr/bin/env bash # Author:xiaolang # Blog:https://www.cnblogs.com/xiaolang666

Windows中的庫程式設計（三、函式呼叫約定 Calling Convention）

平常我們在C#中使用DllImportAttribute引入函式時，不指明函式呼叫約定(CallingConvention)這個引數，也可以正常呼叫。如FindWindow函式

cf578 C. Weakness and Poorness（三分、最大子段和）

題意： 子段的價值定義為子段和的絕對值。陣列的價值定義為最大子段價值。

HTML標籤下-表格標籤

一. 表格標籤 表格是實際開發中非常常用的標籤: 1.表格的主要作用 表格主要用於顯示、展示資料，因為它可以讓資料顯示的非常的規整，可讀性非常好。特別是後臺展示資料的時候，能夠熟練運用表格就顯得很重要。一個清

HTML基礎（三）-HTML標籤（表格標籤）

5.5 表格標籤 表格由一系列標籤組合而成 table：表格 屬性：border用於設定邊框粗細，cellspacing用於設定單元格的間距（0為無間距）

網頁標籤之表格標籤

表格標籤 1、基礎知識 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

HTML學習筆記（三）HTML基礎

認識HTML HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文字標籤語言”，是一種用於建立網頁的標記語言。

前端基礎學習（1） HTML基本概念 HTML標籤

前端基礎學習（1） HTML基本概念 HTML標籤 一、今日內容 前端基本介紹 HTML基本結構

HTM知識點總結（三）：關於HTML常用標籤

技術標籤：htmlhtml 關於HTML常用標籤 （1）列表標籤 1.<ul></ul>：無序列表標籤，用於在效果中定義一個無序列表 2.<li></li>：列表條目項標籤，用於在效果中定義一個列表的條目 3.<

html 圖片 高度無效_HTML基礎標籤（二）

技術標籤：html 圖片 高度無效 本文主要內容 列表標籤：、、表格標籤：框架標籤及內嵌框架

【9】HTML基礎（3）——HTML常用標籤⑤

技術標籤：前端學習中htmlhtml5 【9】HTML基礎（3）——HTML常用標籤⑤ ★文章內容學習來源：拉勾教育大前端就業集訓營

【7】HTML基礎（3）——HTML常用標籤③

技術標籤：前端學習中html 【7】HTML基礎（3）——HTML常用標籤③ ★文章內容學習來源：拉勾教育大前端就業集訓營 接上篇 #目錄 八、無序列表標籤

HTML基礎（六）——列表標籤

技術標籤：HTML+CSShtmlhtml5 文章目錄 列表標籤：無序列表（使用最多）小tip 有序列表定義列表

【5】HTML基礎（3）——HTML常用標籤①

技術標籤：前端學習中html 【5】HTML基礎（3）——HTML常用標籤① ★文章內容學習來源：拉勾教育大前端就業集訓營 #目錄 一、註釋 二、標題標籤 三、段落和換行標籤 四、文字格式化標籤

HTML基礎（九）-HTML標籤（表單標籤）

5.6 表單標籤 表單是指一個可以由使用者編輯或輸入內容的範圍，比如使用者登入或者註冊到的頁面，都包含表單；

HTML：檔案標籤（三） - 表單標籤

表單可以讓我們將錄入資訊攜帶到伺服器端。 簡單說，通過表單可以將要提交的資料提交到指定的位置。

HTML基礎入門（常用標籤及其屬性）

網頁主要由三部分組成：HTML結構（structure） CSS表現（presentation）JavaScript行為（behavior）　　網際網路的三大基石:HTML、HTTP協議、URL

html基礎知識-表格標籤（form，input）

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <!-- <title></title>