2. 程式人生 > >HTML表格與列表

HTML表格與列表

阿新 • • 發佈：2019-01-18

HTML表格

表格其實就是很多的小單元格，而這些小單元格很有次序的排列著，它們有很多行，很多列。這些很多行列組成的東西，就叫表格，表格是<table>標籤來定義的。而<table>標籤中的行就是<tr>標籤，而列就是<td>標籤，必須先定義行才能定義列。因為html中，每一列是在一行當中的。

下表總結了一些常用的標籤：

表格 描述
<table> 定義表格
<caption> 定義表格標題
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格的單元
<thead> 定義表格的頁首
<tbody> 定義表格的主體
<tfoot> 定義表格的頁尾
<col> 定義表格的列屬性

先定義一個簡單的表：

執行後可以看到

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </
 
head>
    <body>
        <table border="1">
            <tr>
                <td>水果</td>
                <td>水果</td>
                <td>水果</td>
            </tr>
    <!-- 下面將td與tr反正寫了，是不會構成表的 -->
            <td>
                <
 
tr>asd</tr>
                <tr>asd</tr>
                <tr>asd</tr>
                <tr>asd</tr>
            </td>
        </table>
    </body>
</html>

可以看到，上面註釋下面的<td>與<tr>反正寫了。會出現一個很細小的表格，但是<tr>中寫的文字，是不會顯示上去的

所以html中，編寫表格是要一行一行的寫。<tr>標籤中包含<td>

image

沒有邊框的表格

沒有邊框的表格，其實就是在<table>標籤中，不加屬性border。border這個屬性是代表表格的邊框。如果不加屬性的話，預設border="0" ，但是沒有邊框有的時候你就看不出來它是一張表格了。所以有的時候會給border="1px"設定1畫素的邊框。暫時去掉border屬性，完成一張沒有邊框的表格

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <table>
            <tr>
                <td>呵呵</td>
                <td>哈哈</td>
                <td>嘻嘻</td>
            </tr>
            <tr>
                <td>嘿嘿</td>
                <td>嘎嘎</td>
                <td>噗噗</td>
            </tr>
            <tr>
                <td>啊啊</td>
                <td>哦哦</td>
                <td>噢噢</td>
            </tr>

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

image


表格中的表頭 <tr><th>我是表頭</th></tr>

還可以給表新增表頭，使用<th>標籤，<th>標籤也是在<tr>標籤中的，我們為了好看，還是把border加上：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <table border="1">
            <tr>
                <th>人物</th>
                <th>介紹</th>
                <th>產品</th>
            </tr>
            <tr>
                <td>史蒂夫·保羅·喬布斯</td>
                <td>蘋果CEO</td>
                <td>Apple系列</td>
            </tr>
            <tr>
                <td>丹尼斯·裡奇</td>
                <td>C語言之父</td>
                <td>C語言</td>
            </tr>
            <tr>
                <td>比爾·蓋茨</td>
                <td>微軟CEO</td>
                <td>Windows系統</td>
            </tr>

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

image

還可以設定表格內的邊距 cellpadding 屬性
也可以設定單元格邊距 cellspacing 屬性

<table border="1" cellpadding="10" cellspacing="10">
    <tr>
        <td>xxx</td>
    </tr>
</table>


帶有標題的表格 <caption>

<table border="1" cellpadding="10" cellspacing="10">
            <caption>xxx表</caption>
            <tr>
                <td>xxx</td>
            </tr>
</table>

表格內的顏色bgcolor屬性

<table border="1" bgcolor="red">
    <tr>
        <td>xxx</td>
    </tr>
</table>


單元格內容排列 align 屬性分別有center、left、right

<table border="1" align="center">
    <caption>xxx表</caption>
    <tr>
        <td>xxx</td>
    </tr>
</table>

跨行和跨列的單元格 colspan屬性，準確的來說，就是合併單元格

<table border="1">
    <caption>xxx表</caption>
    <tr>
        <td colspan="2">xxx</td>
        <td>xxx</td>
    </tr>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
</table>

image

HTML列表

列表就是像word裡面的標題一樣，順著往下數的標題。

下標是一些控制標題的標籤

標籤 描述
<ol> 有序列表
<ul> 無序列表
<li> 列表項
<dl> 列表
<dt> 列表項
<dd> 描述

這些列表還分有序列表，無序列表和自定義列表。

無序列表

        <ul>、<li>

        屬性：disc：實體圓、circle：空心圓、square：實體方塊

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    <!-- 無序列表預設屬性是disc，disc定義一個實體圓，所以disc不用刻意去設定 -->
        <ul>
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ul>
    <!-- 這些屬性都是通過type來定義的，circle是定義一個空心圓 -->
        <ul type="circle">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ul>
    <!-- square定義實體方塊 -->
        <ul type="square">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ul>
    </body>
</html>

image

有序列表

        <ol>、<li>

        屬性：A、a、l、i、start

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    <!-- 有序列表預設是數字往下計數的 -->
        <ol>
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ol>
    <!-- 定義A，就是按照大寫字母來計數的，當然了，不能直接定義B，它不是不會從B開始數的 -->
        <ol type="A">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ol>
    <!-- 定義a，就是安裝小寫字母開始計數的 -->
        <ol type="a">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ol>
    <!-- 定義I，就是按照大寫羅馬數字計數的 -->
        <ol type="I">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ol>
    <!-- 定義i，就是按照大寫羅馬數字計數的 -->
        <ol type="i">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ol>
    <!-- start屬性，就是按照從多少數來計數，比如我想從3開始計數。start屬性只能定義數字，不支援英文字母哦。 -->
        <ol start="3">
            <li>我是第一個</li>
            <li>我是第二個</li>
            <li>我是第三個</li>
        </ol>
    </body>
</html>

image

巢狀列表

        <ul>、<ol>、<li>

巢狀列表就是有序列表套無序列表，無序套有序的唄。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <ol>
            <li>人物</li>
            <ul>
                <li>斯蒂芬·保羅·喬布斯</li>
                <li>丹尼斯·裡奇</li>
                <li>比爾·蓋茨</li>
            </ul>
            
            <li>動物</li>
            <ul>
                <li>貓</li>
                <li>狗</li>
                <li>熊</li>
            </ul>
        </ol>
            
    </body>
</html>

image

自定義列表

        <dl>、<dt>、<dd>

自定義的列表，就是沒有有序、無序的點。後期可以用CSS樣式來加工修改。也是比較常用的操作

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <dl>
            <li>我是標題</li>
            <dt>
                <dd>我是正文，我必須長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長</dd>
            </dt>
        </dl>
            
    </body>
</html>

image

相關推薦

HTML表格與列表

HTML表格 表格其實就是很多的小單元格，而這些小單元格很有次序的排列著，它們有很多行，很多列。這些很多行列組成的東西，就叫表格，表格是<table>標籤來定義的。而<table>標籤中的行就是<tr>標籤，而列就是<td>標籤，必須先定義行才能定義列。因為h

html-表格和列表

wid cnblogs 有序列表 hot logs nbsp lac 頁腳 head 一：表格標簽 表格描述 <table> 定義表格 <caption> 定義表格標題。 <th> 定義表格的表頭。 <tr&g

HTML表格與表單

表格標籤table tr 代表一行 td 代表一列，以下是一個一行兩列的標籤 <table> <tr> <td></td> <td></td> </tr> </table> tr不能設

HTML CSS筆記列表與表格

HTML CSS 加粗:<b>b</b> <strong>strong</strong>換行:<br /> <wbr>安全換行</wbr>傾斜:<i>i</i> <em>em<

HTML列表,表格與媒體元素

href 側邊欄 排序類 必須 frame pan 輔助 音頻 順序 一.無序列表 <ul> <li>無序列表</li> <li>有序列表</li> <l

HTML，字型/列表/圖形/超連結/表格/表單/其它(標籤)，CSS，CSS與HTML結合方式，CSS選擇器，CSS擴充套件選擇器

一、HTML 1.html的簡介 （1）什麼是html？HyperText Mark-up Language ，超文字標記型語言，是網頁的語言。 * 超文字：超出文字的範疇 * 標記：理解為標籤，html中所有的操作都是通過標籤來實現的 * html

列表 表格與媒體元素

ble 接收 tab 出現 指定 成了 標題 這一 每一個 無序列表及其應用 語法<ul><li>第一項</li><li>第二項</li><li>第三項</li></ul>遵循W

HTML筆記（四） - 圖像、表格、列表、區塊

sem inline 註意 樣式 而不是 style height nbsp 另一個 一、圖像 1、圖像標簽（<img>）和源屬性（<Src>） 在HTML中，圖像由<img>標簽定義，<img>是空標簽，它只包含屬性，並且沒

列表。表格與媒體元素

標識 enter bsp name ble HR nav section 類型信息 一.無序列表 <ul> <li>無序列表</li> <li>有序列表</li> <li

第二章 列表、表格與媒體元素

side 相等 video vid source 視頻 名稱 文章內容 穩定 一.無序列表 <ul> <li>無序列表</li> <li>有序列表</li> <

html-2, a img ul li ol dl dt dd 標簽與列表標簽的簡單使用

oid spa sta 資源加載 顯示 self start uno 實現圖 <!-- a： （1）超鏈接 href 超鏈接的地址 target: _

列表 ，表格與媒體元素基礎

html 內聯 註意 src 表格 塊元素 元素 自動 框架 一.列表 信息資源的一種展示形式 二.列表的分類 1.有序列表 <ol> <li>列表項1</li> <li>列表項2</li> </

列表、表格與媒體元素

列表 什麼是列表 列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的資訊 列表的分類 無序列表 有序列表 定義列表 無序列表的特性 沒有順序，每個<li>標籤獨佔一行（塊元

HTML5------列表、表格與媒體元素

列表 無序列表: 無序列表中使用到了ul與li標籤，ul為外標籤，ul中只能存在li標籤，li標籤中可以存在其他標籤 基本格式： <ul> <li>···</li> <li>···</li> ··

前端筆記—從入門到墳墓[HTML+CSS][表格與表單]

表格 <table>標籤常用屬性：cellspacing設定單元格之間的距離，cellpadding設定單元格內容到單元格邊的距離，border設定單元格邊框寬度。 注：以上屬性單位皆為px。 <td>標籤常用屬性：colspan設定

HTML學習2——列表標籤，表格標籤，單元格合併

1.列表標籤：給一堆資料新增列表語義，告訴瀏覽器這一堆資料是一個整體  * 無序列表：給一堆資料新增列表語義，並且這堆資料沒有先後之分，在開發中用的最多     格式：<ul><li>需要顯示的條目內容</li></ul>  

HTML 學習筆記（4）樣式- CSS，影象，表格，列表

轉載： HTML 簡介 CSS (Cascading 串聯 Style Sheets) 用於渲染HTML元素標籤的樣式. CSS 可以通過以下方式新增到HTML中: 內聯樣式- 在HTML元素中使用"style" 屬性 <a href="http://www.

O'REILLY_Chap.13_表格與更多列表

<HeadFirst_HTML與CSS> O’REILLY_Chap.13_表格與更多列表 本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫

5、HTML 學習記錄——影象、表格、列表

在補HTML相關知識的時候，忘記說明了，這一系列的前端知識，只是為了讓自己對前端認識更深刻，以方便UI 自動化測試，所以在學習時也只是涉及自動化相關的知識點，不適合前端開發人員來看。 本節學習影象、

HTML 表格中的行合併與列合併

colspan是橫向合併；rowspan是縱向合併。 colspan是“column span（跨列）”的縮寫。colspan屬性用在td標籤中，用來指定單元格橫向跨越的列數： 單元格1 單元格2 單元格3 單元格4 該例通過把colspan設為“3”, 令所在