1. 程式人生 > >【WEB基礎】HTML & CSS 基礎入門(7)表格

【WEB基礎】HTML & CSS 基礎入門(7)表格

表格的基本結構

表格是網頁上最常見的元素,它除了可以用來展示資料,還常常被用來排版。雖然現在提倡使用DIV+CSS完成頁面佈局,但表格框架簡單明瞭,對於繁雜的資料,一個簡潔的表格能讓其展現的極有條理。

簡單來說,表格是由行、列(單元格)組成。表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行又由若干單元格(即列,由 <td> 標籤定義)組成。表格單元格里可以包含文字、圖片、列表、段落、表單、水平線、表格(巢狀)等等。

別羅嗦,看程式碼。

下面的程式碼是一個兩行兩列的表格。

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

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

表格的標準結構

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

下面的示例程式碼加入了標題和表頭,同時引入了表格語義化,將表格分為頁首、主體。頁尾三個部分,表格語義化是否新增不會影響到表格的顯示效果。

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

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

表格的行、列合併

在表格的實際應用中,經常需要將表格相鄰的兩個或多個單元格合併,以滿足不同長度或不同型別的資料展示。

<td>標籤的【rowspan】屬性可以實現合併行,<td rowspan="合併的行數">

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

-------------------------- END --------------------------<