html之table標籤

時間 2019-11-20

標籤 html table 標籤欄目 HTML 简体版

原文原文鏈接

簡單的html表格，由table元素以及一個或多個tr,th,td元素組成。html

tr:定義表格行服務器

th:定義表格頭ide

td:定義表格單元字體

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。spa

可選屬性：code

align:htm

left 字體靠左，右，居中
center 字體靠右
right 字體靠居中

bqcolor：表格背景色blog

rgb(x,x,x)
#xxxxxx
colorname

border:表格邊框的寬度 內存

cellpadding:單元格邊緣與其內容之間的距離ci

pixels
%

cellspacing:單元格之間的空白

pixels
%

示例代碼：

<body>
    <table border="1" cellpadding="10" cellspacing="5">
        <thead>
            <tr>
                <th>第一列</th>
                <th align="left">第二列</th>
                <th bgcolor="aqua">第三列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>row1 col1</td>
                <td>row1 col2</td>
                <td>row1 col3</td>
            </tr>
            <tr>
                <td>row2 col1</td>
                <td>row2 col2</td>
                <td>row2 col3</td>
            </tr>
            <tr>
                <td>row3 col1</td>
                <td>row3 col2</td>
                <td>row3 col3</td>
            </tr>
        </tbody>
    </table>
</body>

View Code

上圖看看：

效果怎麼樣呢？

再看看邊框屬性吧：

fram:外側邊框哪一個可見

void 外邊框四邊不見了
above 僅上邊框可見
below　僅下邊框可見
hsides 僅上下邊框可見
lhs 僅左邊框可見
rhs 僅右邊框可見
vsides　僅左右邊框可見
box 四邊都可見
border　單元格邊框可見

rules:內側邊框哪一個可見

none 無內側邊框
groups 僅上邊框可見
rows 僅行間邊框可見
cols 僅列間邊框可見
all 內邊框都可見

表格的概要與寬度

summary：表格的概要

width：表格的寬度

%
pixels

再看看其它表格效果吧：

上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1" cellpadding="10" width="800px" bgcolor="#5f9ea0">
        <tr>
            <th>機型</th>
            <th>CPU</th>
            <th>內存</th>
            <th colspan="2">描述信息</th>
        </tr>
        <tr>
            <th rowspan="2">DELL2950</th>
            <td>2.4GHZ</td>
            <td>16GB</td>
            <td>
                <p>CPU壞了一顆</p>
                <p>工程師明上午來修</p>
            </td>
            <td>
                <table border="1">
                    <tr>
                        <th>姓名</th>
                        <th>電話</th>
                    </tr>
                    <tr>
                        <td>孔紮根</td>
                        <td>15211089765</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>2.4GHZ*2</td>
            <td>16GB</td>
            <td>
                <ul>
                    <p>花費詳單</p>
                    <li>服務器5800塊</li>
                    <li>兩顆CUP共1萬塊</li>
                    <li>內存花了4000塊</li>
                </ul>
            </td>
            <td>200GB</td>
        </tr>
        <tr>
            <th>DELL5800</th>
            <td>2.4GHZ*2</td>
            <td>32GB</td>
            <td>800GB</td>
            <td>800GB</td>
        </tr>
        <tr>
            <th>DELL9700</th>
            <td>2.4GHZ*8</td>
            <td>128GB</td>
            <td>2TB</td>
            <td>2TB</td>
        </tr>
    </table>
</body>
</html>

View Code

解釋圖：

最終效果圖：

相關標籤/搜索

每日一句

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