h5學習筆記 Table

阿新 • • 發佈：2018-12-20

這裡寫圖片描述

編寫一個表格作為練習。當中有個比較重要的樣式在學習過程中遇到，border-collapse: collapse; 能夠去除雙重的邊框。table可以合併單元格所以對td屬性設定 colspan=”2” 則代表可以設定單元格。

table 當中thead， tbody， tfoot 都是table元素。使用thead代表表頭，這個標籤好處的無需關係位置。同樣tfoot 也一樣。

.mytable tr:nth-child(2n) 為隔開選取，這樣就能夠間隔地處理錯開的顏色。

<!DOCTYPE html><html>    <head>        <meta 
 charset="UTF-8">        <title>Table 練習</title>    </head>    <style>        .mytable        {            width: 800px;            height: auto;            margin: 0 auto;        }        .mytable table        {            width: 100%;            border: 1px solid #999;            padding 
: 0;            margin: 0;            border-collapse: collapse;        }        .mytable th        {            height: 45px;            line-height: 45px;            text-align: center;            border-bottom: 1px solid #999;            padding: 0;            margin: 0;        }        .mytable td        {            height 
: 45px;            line-height: 45px;            text-align: center;            border-bottom: 1px solid #999;            padding: 0;            margin: 0;        }        .mytable tr:hover        {            background-color: #f8f8f8;        }        .mytable tr:nth-child(2n)        {            background-color: #f8f8f8;        }        .mytable tfoot        {            width: 100%;        }        .mytable  tfoot a{            text-decoration: none;            color: #999;        }    </style>    <body><div class="mytable">    <table>        <thead>            <tr>                <th>姓名</th>                <th>性別</th>                <th>電話</th>                <th>地址</th>            </tr>        </thead>        <tbody>            <tr>                <td>小米</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>            <tr>                <td>華為</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>            <tr>                <td>三星</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>            <tr>                <td>蘋果</td>                <td>未知</td>                <td>1234567</td>                <td>火星文明</td>            </tr>        </tbody>        <tfoot>               <tfoot>                <tr>                                     <td><a href="#" class="more">上一頁</a></td>                    <td colspan="1"><a href="#" class="more">下一頁</a></td>                    <td colspan="2"></td>                </tr>              </tfoot>        </tfoot>            </table></div>    </body></html>

h5學習筆記 Table

編寫一個表格作為練習。當中有個比較重要的樣式在學習過程中遇到，border-collapse: collapse; 能夠去除雙重的邊框。table可以合併單元格所以對td屬性設定 colspan=”2” 則代表可以設定單元格。table 當中thead， tbody

h5學習筆記：layui table

最近在做Layui的後臺，發現Layui這個方案也不錯，能夠快速地在後臺直接部署。相比還要配置webpack，Layui jquery體系開箱即用在一些單獨的情況下還是挺不錯的。最近整理一下現在梳理一下Table元件的用法。一、Table 元件 Tabl

h5學習筆記 ul和li組合

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

h5學習筆記 vuethink 配置

H5學習筆記1

URI與URL 統一資源識別符號****URI代表Internet上的一個資源，統一資源定位符****URL是一種特別的URI，代表網頁，圖形檔案或者MP3檔案等資源的網路位置。標題元素 h1到h6共六級，標題文字全部加粗。段落元素 <p>與&l

lua學習筆記----table操作

1.table的連線 table.concat(mytable," ",begin,end) 返回值是一個字串引數1：要進行操作的表，引數2：某個元素之間以什麼分割，引數3：起始元素，終止元素 mytable={"banana","apple","orange"

h5 學習筆記：記錄一些前端用到後臺和移動樣式庫

這幾天一直在找一些移動和業務樣式庫，發現了不少不錯的，既是漂亮又符合業務用到。前端發展真的變化很快，發現市面上還是有不少開源好用的產品。針對後臺研發的，有阿里ant design、阿里通訊的，還有餓了麼，京東，有贊等等一些庫。我比較喜歡ant design裡面

H5學習筆記

<html></html>所有超文字檔案都得放入此標籤中 <q></q>引用文字標籤 <hx></hx> （x 1-6）標題文字一級到六級標題 <span></span>用於css自定義

h5學習筆記： css佈局案例練習

今天練習一下css相關的佈局，沒有寫互動內容。在css佈局中，發現也不少不熟悉的地方。只是沒有形成概念，其次對一些用法比較模糊。日後需要加強一下這些。對平衡的兩個div應該如何處理，還要繼續想想辦法。

h5學習筆記（4）居中

今天調整居中一直遇到一些問題，針對css的特性多少會發現一些無解的狀態，實在寫得太慢了，很多時候都需要靠練習去體驗。查看了一些資料，發現下面使用絕對和相對位置配合還是挺湊效。今天想實現兩張圖片，其中一張需要居中效果，改用下面的css樣式可以顯示想要的效果

H5學習筆記之Transform

Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。下面我們一起來看看CSS3中transform的旋轉rotate、扭曲s

h5學習筆記：居中

將之前的用到的記錄一下。以便不時之需。朋友一直和我講css 是不簡單，到目前為此，css發展已經進化到越來越驚人。其實學好css 不容易，也沒有人所說的那樣簡單。css2- css3 – 進化less，sass，postcss，似乎真是越來越多。那天看了一下le

R語言學習筆記 —— table 函式的應用

一、table 函式對應的就是統計學中的列聯表，是一種記錄頻數的方法，對於統計來說有非常重要的應用，下面的例子都是針對維數為2的情況舉例，多維的情況是類似的下面看一個例子： > ct <- data.frame( + Vote.for.X =

h5學習筆記：flex

flex部署可以很方便佈局橫向和垂直縱向的設計。所以在編寫小程式可以放心使用。 flex 依舊有瀏覽器相容性的問題。但是ie 8 這種瀏覽器真不管太多了。今晚做一個練習，記錄一下之前工作中用到用法。flex是一種常用佈局方式，使用這種方式處理一些佈局。

Latex 學習筆記--table 和 algorithm的寫法

稍微整理下latex 寫table和algorithm的方法，大多是對網上搜索到的內容的整理最簡單的table的寫法：程式碼 \begin{table} \begin{center} \caption{your table caption} \begi

h5學習筆記：使用fis的前端構建工具記錄

這幾天練習一下webpack ，glup的工具使用，發現webpack 配置起來並不是太順利，總是有一種抗拒的，但從vuejs 和react 需要這種配套的方案去解決打包和釋出版本問題。這也是需要挖一下坑，把這塊骨頭啃下來。無意中找到了fis百度的前端構建工

h5學習筆記：vue 路由部署伺服器子目錄問題

《Egret 引擎入門》這兩天一直在查詢vue經過打包後部署伺服器一直顯示不出來的問題。前端沒有報錯，資源載入也很正常。找了很多回答，最後定位在vue的訪問路由出了問題。出現的現象前端vuejs+vue-router+webpack的組合，打包是由w

h5學習筆記：UI庫

自從接觸了web開發以來，每天都會很糾結選什麼UI框架才是比較合適？擺在這個問題面前是一個技術的選型。要想知道，web開發的坑實在太深。不斷地大廠推出開源框架，不斷地發現很多造輪子。或者看到一個比較漂亮就會選。最近我深刻體會到這種矛盾的存在，前段時間一直用j

h5學習筆記：http-server小工具

今天下午遇到一個小問題，下載的專案放置XAMPP二級目錄裡面，資源都會發生錯誤的情況，這個時候為了解決這個辦法，使用了fis3的內建伺服器去處理。使用fis3伺服器也是挺方便的。使用fis3的指令碼首先啟動伺服器，然後將檔案釋出到內建的伺服器。 fis

H5學習筆記——基本知識

今天開始學習H5的知識，當然也是基礎的，並不是非常系統。這兩天同事一直吵吵這讓給做搶號軟體。。弄得我一臉懵逼，不會啊，努力學習新知識吧。 1、基礎標籤&知識換行：<br /> 空格：  大於號：&g

h5學習筆記 Table

相關推薦