HTML表格與列表

時間 2019-12-01

標籤 html 表格列表欄目 HTML 简体版

原文原文鏈接

HTML表格

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

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

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

先定義一個簡單的表：3d

運行後能夠看到code

<!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>中寫的文字，是不會顯示上去的htm

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

沒有邊框的表格utf-8

沒有邊框的表格，其實就是在<table>標籤中，不加屬性border。border這個屬性是表明表格的邊框。若是不加屬性的話，默認border="0" ，可是沒有邊框有的時候你就看不出來它是一張表格了。因此有的時候會給border="1px"設置1像素的邊框。暫時去掉border屬性，完成一張沒有邊框的表格ci

<!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>

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

還能夠給表添加表頭，使用<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>

還能夠設置表格內的邊距 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>

HTML列表

列表就是像word裏面的標題同樣，順着往下數的標題。

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

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

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

無序列表

屬性：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>

有序列表

屬性：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>

嵌套列表

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

<!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>

自定義列表

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。