前端入門篇（七）表格

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

技術標籤：前端入門 html5

table表格標籤
tr定義行
th，行中單元格，用於定義標題
td，行中單元格，定義內容
colspan合併列 rowsapn合併行
上(sup)下(sub)標
輸入tr*4並回車即可快速生成4行

簡單表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>表格</title>
</head>
<body>
    colspan合併列
    rowsapn合併行
    <table border="1px">
        <tr>
            <th>部門</th>
            <th>姓名</th>
            <th>性別</th>
            <th>工資</th>
        </ 
tr>
        <tr>
            <th rowspan="4">開發部門</th>
            <!-- 合併4行 -->
            <th>小明</th>
            <th>男</th>
            <th>1w</th>
        </tr>
        <tr>
            <th>小明明</th>
            < 
th>男</th>
            <th>1w</th>
        </tr>
        <tr>
            <th>小小明</th>
            <th>男</th>
            <th>1w</th>
        </tr>
        <tr>
            <th colspan="2">總工資</th>
            <!-- 合併2列 -->
            <th>3w</th>
        </tr>

    </table>
</body>
</html>

效果：
在這裡插入圖片描述

程式碼2（帶上下標）：

    </table>
    <br>
    <br>
    <table border="1px">
        <tr>
            <td>Name</td>
            <td>Mass<br>(10<sup>24</sup>Kg)</td>
            <td>Diameter<br>(km)</td>
            <td>Density<br>(kg/m<sub>3</sub>)</td>
        </tr>
        <tr>
            <td>Mercury</td>
            <td>0.330</td>
            <td>4,879</td>
            <td>5427</td>
        </tr>
    </table>

效果：
在這裡插入圖片描述

前端入門篇（七）表格

技術標籤：前端入門html5 table表格標籤 tr定義行th，行中單元格，用於定義標題td，行中單元格，定義內容colspan合併列 rowsapn合併行上(sup)下(sub)標輸入tr*4並回車即可快速生成4行

MySQL入門篇（七）之Xtrabackup備份與恢復

一、Xtrabackup介紹　　MySQL冷備、mysqldump、MySQL熱拷貝都無法實現對資料庫進行增量備份。在實際生產環境中增量備份是非常實用的，如果資料大於50G或100G，儲存空間足夠的情況下，可以每天進行完整備份，如果

前端入門篇（九）佈局

技術標籤：前端入門css3html5csshtml 佈局方式 div+cssiframeframeset div+css：當前主流佈局方式

前端入門篇（三十七）JS基礎4流程控制與迴圈

技術標籤：前端入門javascript if 條件判斷 //if 條件判斷語法格式： if {執行條件} {

Vue + Element UI 實現許可權管理系統前端篇（七）：功能元件封裝

因為我暫時不需要第五章和第六章教程的內容所以直接進入第七章。感興趣的可以訪問原作者網站

前端入門篇（二十）文字

技術標籤：前端入門css3 1.字型font-family：預設宋體，可以設定多個，當前面的字型沒有時，就用後面的，都沒有時，用預設字型，逗號隔開

前端入門篇（三十二）選項卡

技術標籤：前端入門css3 使用em和span輔助設定選項卡文字樣式 html檔案： <div class="seckill-nav">

前端入門篇（三十一）搜尋框和購物車圖示

技術標籤：前端入門css3 搜尋框 html檔案： <div class="header-search"> <form action="" class="search-form">

前端入門篇（三十五）JS基礎2運算子

技術標籤：前端入門javascript 算術運算子加減乘除取餘( + - * / %) 加法中，如果有字串則將加數都轉成字串，再相加；如果沒有字串，最後都轉成數字

前端入門篇（三十）logo導航欄問題記錄

技術標籤：前端入門css 1.連結內加背景圖片，需先將連結標籤設定為塊元素，並設定寬高否則無法顯示出圖片 css檔案：

前端入門篇（二十九）頂部選單欄問題記錄

技術標籤：前端入門css3 1.文字靠上解決辦法：設定高度和行高，使高度與背後的黑條一致（40px）

前端入門篇（四十一）JS基礎8動態修改網頁內容(DOM操作)

技術標籤：前端入門js 基本概念： 1.DOM操作：JS動態修改網頁內容 2.DOM樹：將html檔案轉換為機器能看得懂的資料結構；包含document節點、標籤節點、文字節點； document裡面包含相應的方法，一個html檔案裡有

前端入門篇（四十四）JS基礎11商品資訊隨選項卡切換

技術標籤：前端入門jscsshtml html檔案：div下有5個商品頁，此處放其中一個的程式碼，其他類似

前端入門篇（四十三）JS基礎10選項卡標籤切換

技術標籤：前端入門jscssjavascript 想要的效果：點選到選項卡中不同標籤時，被選中的標籤背景顏色變紅

Python 入門日記（七）—— 使用者輸入和 while 迴圈

2020.07.13 Python 入門的 Day6 成就：使用者輸入和 while 迴圈函式 input() 可用於讀入字串，使用 input() 讀入的資料都被視作字串。

深度學習與Pytorch入門實戰（七）Visdom視覺化工具

筆記摘抄 1. 安裝visdom 安裝教程 2. 開啟監聽程序 python -m visdom.server 3. 訪問用chrome瀏覽器訪問url連線：http://localhost:8097

Vala之入門篇（二）Vala安裝

Windows上的Valahttps://wiki.gnome.org/Projects/Vala/ValaOnWindows MSYS2 MSYS2專案使Windows版Vala的版本保持最新。

MySQL入門篇（六）之mysqldump備份和恢復

MySQL入門篇（六）之mysqldump備份和恢復一、備份單個數據庫 1、備份命令：mysqldump

Web前端入門學習（1）——走進前端世界

前端基礎知識前端開發語言：HTML（Hypertext Markup Language）：超文字標記語言；CSS（Cascading Style Sheets）：層疊樣式表；JS（JavaScript）：指令碼語言。

C# Stream篇（七） -- NetworkStream

NetworkStream 目錄： NetworkStream的作用簡單介紹下TCP/IP 協議和相關層次簡單說明下 TCP和UDP的區別