2. 程式人生 > >一天搞定CSS：表格（table）--19

一天搞定CSS：表格（table）--19

阿新 • • 發佈：2019-02-13

1.表格標籤

這裡寫圖片描述

表格標籤的巢狀關係

<table>
    <!--表格頭-->
    <thead>
        <!--表格行-->
        <tr>
            <!--表格列，【注意】這裡使用的是th-->
            <th></th>
        </tr>
    </thead>

    <!--表格主體-->
    <tbody>
        <!--表格行-->
        <tr
 
>
            <!--表格列，【注意】這裡使用的是td-->
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>

    <!--表格底部-->
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot
 
>
</table>

2.例項演示–課程表

border-collapse:collapse; - - -表示清除表格之間的間隙
這裡寫圖片描述

程式碼演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*1.清除表格預設樣式*/
            table{
                border-collapse
 
: collapse;
            }
            th,td{
                padding: 0;
            }


            /*2.設定表格大小，以及表框顏色*/
            table{
                margin: 0 auto;
                width: 500px;
            }
            th,td{
                border: 1px solid pink;
                font: 20px/50px "微軟雅黑";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--
            表格標籤
                table           表格
                thead           表格頭
                tbody           表格主體
                tr              表格行
                th              表格頭裡的單元格(預設加粗並且居中)
                td              表格主體裡的單元格
                tfoot           表格底部

            表格的預設樣式
                table{border-collapse:collapse;}        單元格之間的間隙
                th,td{padding:0}

        -->

        <table cellspacing="0">
            <thead>
                <tr>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.表格行和列的合併

rowspan 合併行(豎著合併)
colspan 合併列(橫著合併)

效果圖：

這裡寫圖片描述

程式碼演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{
                border-collapse: collapse;
            }
            th,td{
                padding: 0;
            }


            table{
                margin: 0 auto;
                width: 500px;
            }
            th,td{
                border: 1px solid pink;
                font: 20px/50px "微軟雅黑";
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--
            表格標籤    
            rowspan         合併行(豎著合併)
            colspan         合併列(橫著合併)
        -->
        <table cellspacing="0">
            <thead>
                <tr>
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="4">    上午</td>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <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>
                </tr>
                <tr>
                    <td>語文  </td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--合併列-->
                    <td colspan="6">夜自習</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

配套小練習

相關推薦

一天搞定CSS：表格（table）--19

1.表格標籤 表格標籤的巢狀關係 <table> <!--表格頭--> <thead> <!--表格行-->

一天搞定CSS： 浮動（float）的副作用--12

我們通常使用浮動來實現某些元素的佈局，但是往往這些元素浮動會影響其他元素的佈局，因此會產生副作用。 浮動帶來的副作用 1. 塊狀元素，會鑽進浮動元素的下面，被浮動元素所覆蓋，像這樣

一天搞定CSS：層級(z-index)--18

因為定位的出現，所以有了元素重疊的情況，此時就出現了顯示誰的情況。在多層佈局時，容易出現這種情況 1.預設層級規則 但層級規則可以通過z-index來設定 1.在正常情況下，層級的

一天搞定CSS：盒模型content、padding、border、margin--06

1.盒模型 網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。 這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。 2.

一文搞定陣列扁平化（超全面的陣列拉平方案及實現）

前言 面試手寫程式碼在大廠面試中非常常見，秋招中面試小米就手寫了一道flat實現的程式碼題，當時通過遞迴方式實現了陣列扁平化邏輯，但沒有考慮多種實現方案及其邊界條件(主要是對所涉及到高階函式的知識點不夠熟練，也沒有考慮空位處理)，現在從頭梳理一下，並儘可能全面地總結陣列扁平化的實現方案。 陣列扁平化 陣列扁平

Springboot(9)輕鬆搞定跨域訪問（CORS）

原始碼地址 CORS實現跨域訪問 方式1：返回新的CorsFilter 方式2：重寫WebMvcConfigurer 方式3：使用註解（@CrossOrigin） 方式4：手工設定響應頭（HttpServletResponse ）

輕鬆搞定java記憶體模型（二）類的載入以及初始化

上一篇我們隊java虛擬記憶體構成做了基本的介紹，本篇就以HotSpot虛擬機器為例，分析下一個物件從建立到被銷燬的過程。本篇主要講解類的載入過程。 1：類的載入過程 類的載入過程大概可以分為一下

一小時搞明白自定義註解（Annotation）

*本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 什麼是註解         Annotation（註解）就是Java提供了一種元程式中的元素關聯任何資訊和著任何元資料（metadata）的途徑和方法。Annotion(註解)是一個介面，程式可以通

CSS設計表格（下）--PHP讀取XML並用表格顯示

前言    在剛開始的時候，我說過這個表格準備用於後臺顯示使用者資訊等，既然是後臺，就少不了和資料庫及後臺語言(比如PHP)打交道，比如我通過PHP讀取資料庫資訊並顯示。本節內容為了簡單起見，以XML檔案代替資料庫的儲存功能，將使用者資訊存放於XML檔案內，如下userin

花一天時間試玩vsphere6.7（EXSI）伺服器版的vmware

花一天時間試玩vsphere6.7（EXSI）伺服器版的vmware 要註冊賬號（2019年11月14註冊）： 登陸網址：https://my.vmware.com/cn/group/vmware/home 賬號：[email protected] 密碼：0nV+SJ8fZbdE8g== 看了下。不管是標準版，企業版，測

Bootstrap模態框（modal），並新增帶複選框的表格（table），還可做提示框、檔案選擇框等，很實用！

      Bootstrap中的模態框外掛以彈出對話方塊的形式出現，具有最小和最實用的功能集，主要的是使用起來很靈活！有以下幾個特性：（1）不支援同時開啟多個模態框；（2）務必將模態框的 HTML 程式碼放在文件的最高層級內（也就是說，儘量作為 body 標籤的直接子元素）

Bootstrap—輕鬆製作漂亮表格（table）

學習了runoob.com網站中的bootstrap內容之後，參照其中的內容自己做一下總結，以便幫助在這方面有疑惑的朋友，也有助於自己更好的消化所學的內容。 我們應該慶幸自己活在這樣一個網際網路時代，

20170726 jQuery操作表格（table）的常用方法、技巧彙總

function btnAddRow(){     //行號是從0開始，最後一行是新增、刪除、儲存按鈕行 故減去2     var rownum=$("#table1 tr").length-2;     var chk="<input type='checkbox' id='chk_"+rownu

合併表格（Table）單元格

Imports ZwSoft.ZwCAD.Runtime Imports ZwSoft.ZwCAD.ApplicationServices Imports ZwSoft.ZwCAD.DatabaseServices Imports ZwSoft.ZwCAD.EditorIn

Linux防火牆iptables的表格（table）與鏈（chain）

一 iptables的含義 也就是IP表的意思，從軟體的名稱上體現了軟體的組成，iptables是由最基本的多個表（table）組成，而且每個表用途都不一樣，在每個表中，又定義了多個鏈（chain），通過這些鏈可以設定相應的規則和策略。 二 iptables的表格和鏈 Filter（過濾器）：主要跟進入L

jQuery操作表格（table）的常用方法、技巧彙總

轉自：https://blog.csdn.net/liaoxm0/article/details/78077037 以下列出13個jQuery操作table常用到的功能： 1.滑鼠移動行變色 [javascript] view plain copy

全面系統講解CSS 工作應用+面試一步搞定 （新手）

html常見元素 當我們使用ajax方式提交資料時還需要from表單嗎？ 需要。利用Jqu’r’y進行批量提交，或者（框架結合，驗證元件去做表單驗證，還有from的特性，記住使用者的賬號密碼） html5 html

一小時搞定DIV+CSS布局-固定頁面開度布局

之前 水平居中 css charset oat img 水平 分享 code DIV+CSS布局中主要CSS屬性介紹： Float: Float屬性是DIV+CSS布局中最基本也是最常用的屬性，用於實現多列功能，我們知道<div>

Tensorflow實現Mask R-CNN實例分割通用框架，檢測，分割和特征點定位一次搞定（多圖）

優點 設計 orf 時間 rcnn 超越 rain 沒有 add Mask R-CNN實例分割通用框架，檢測，分割和特征點定位一次搞定（多圖） 導語：Mask R-CNN是Faster R-CNN的擴展形式，能夠有效地檢測圖像中的目標，同時還能為每個實例生成一個

深入淺出CSS：Div（一）

指定 增加 src 深入 lock alt 舉例 gin width 這個系列是學習筆記，簡明記錄結論性的知識。 新建一個層時，border為零，margin為0，padding為0，如果不指定寬度（width），則自動100%填充父元素。 三、層與父元素的關系 1.