【WEB基礎】HTML & CSS 基礎入門（7）表格

時間 2019-11-18

標籤 WEB基礎 html css 基礎入門表格欄目 HTML 简体版

原文原文鏈接

表格的基本結構

表格是網頁上最多見的元素，它除了能夠用來展現數據，還經常被用來排版。雖然如今提倡使用DIV+CSS完成頁面佈局，但表格框架簡單明瞭，對於繁雜的數據，一個簡潔的表格能讓其展示的極有條理。css

簡單來講，表格是由行、列（單元格）組成。表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行又由若干單元格（即列，由 <td> 標籤訂義）組成。表格單元格里能夠包含文本、圖片、列表、段落、表單、水平線、表格（嵌套）等等。html

別羅嗦，看代碼。框架

下面的代碼是一個兩行兩列的表格。佈局

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <table><!--表格開始-->        
        <tr><!--表格第一行-->
            <td>姓名</td><!--第一行第一個單元格-->
            <td>張三</td><!--第一行第二個單元格-->
        </tr>
        <tr><!--表格第二行-->
            <td>民族</td><!--第二行第一個單元格-->
            <td>漢族</td><!--第二行第二個單元格-->
        </tr>
    </table><!--表格結束-->
</body>
</html>

表格默認是沒有邊框的，下面的效果圖加入了邊框，目的是能讓表格的結構更清晰。ui

表格的標準結構

表格除了行<tr>和單元格<td>，還能夠有標題<caption>和表頭<th>。另外，表格的語義化還將表格分爲表格頁眉<thead>、表格主體<tbody>、表格頁腳<tfoot>三個部分。引入語義化，可以讓表格結構更清晰、代碼語義更良好。spa

下面的示例代碼加入了標題和表頭，同時引入了表格語義化，將表格分爲頁眉、主體。頁腳三個部分，表格語義化是否添加不會影響到表格的顯示效果。3d

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <table><!--表格開始-->        
        <caption>第一學期學生成績表</caption><!--表格標題-->
        <thead><!--表格頁眉-->
            <tr><!--第一行-->
                <th>姓名</th><!--表頭-->
                <th>語文</th>
                <th>數學</th>
                <th>物理</th>
            </tr>
        </thead>
        <tbody><!--表格主體-->
            <tr><!--第二行-->
                <td>張小明</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
            </tr>
            <tr><!--第三行-->
                <td>王小花</td>
                <td>90</td>
                <td>70</td>
                <td>80</td>
            </tr>
        </tbody>
        <tfoot><!--表格頁腳-->
            <tr><!--第四行-->
                <td>平均分</td>
                <td>85</td>
                <td>80</td>
                <td>80</td>
            </tr>
        </tfoot>
    </table><!--表格結束-->
</body>
</html>

表格默認是沒有邊框的，下面的效果圖加入了邊框，目的是能讓表格的結構更清晰。code

表格的行、列合併

在表格的實際應用中，常常須要將表格相鄰的兩個或多個單元格合併，以知足不一樣長度或不一樣類型的數據展現。xml

<td>標籤的【rowspan】屬性能夠實現合併行，<td rowspan="合併的行數">htm

<td>標籤的【colspan】屬性能夠實現合併列，<td colspan="合併的列數">

示例代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*設置圖片的寬和高，防止將表格撐變形*/
        img {width:76px; height:82px;}
    </style>
</head>
<body>
    <table>   
        <tr><!--第1行-->
            <td>姓名:</td>
            <td>小叮噹</td><!--下面是合併兩行-->
            <td rowspan="2"><img src="小叮噹.jpg"/></td>
        </tr>
        <tr><!--第2行-->
            <td>做品:</td>
            <td>哆啦A夢</td>
        </tr>
        <tr><!--第3行-->
            <td>簡介:</td><!--下面是合併兩列-->
            <td colspan="2">來自一部漫畫做品</td>
        </tr>
    </table>
</body>
</html>

表格默認是沒有邊框的，下面的效果圖加入了邊框，目的是能讓表格的結構更清晰。

表格的CSS樣式

表格默認是沒有邊框的，咱們可使用border屬性爲table設置邊框。上面的代碼都是加入邊框，能夠看到，表格都是雙線條邊框，這是因爲 table、th 以及 td 元素都有獨立的邊框。【border-collapse】屬性能夠設置是否把表格邊框合併爲單一的邊框，該屬性的取值主要有兩個，值【separate】爲默認值，表示邊框分開不合並，值【collapse】爲合併邊框。

當表格的邊框屬性【border-collapse】的值爲默認值【separate】，即邊框分開時，咱們還能夠利用屬性【border-spacing】來設置相鄰單元格的邊框間的距離。該屬性能夠設置一個或兩個像素值，當設置一個像素值時，表示水平和垂直間隔爲同一值；若是設置了兩個值，則第一個爲水平間距，第二個爲垂直間距。

示例代碼：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
         /*爲表格設置邊框樣式*/
        table,th,td{border:1px solid red;}
        table.one 
        {   /*設置第一個表格爲合併邊框*/
            border-collapse: collapse;
        }
        table.two
        {   /*設置第二個表格爲分離邊框，同時設置水平間距10px，垂直間距50px*/
            border-collapse: separate;
            border-spacing: 10px 30px
        }
    </style>
</head>
<body>
    <table class="one">
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
        </tr>
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
        </tr>
    </table>
    <br />
    <table class="two">
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
        </tr>
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
        </tr>
    </table>
</body>
</html>