html標籤之表格標籤

時間 2021-01-18

標籤 html 字體 spa code htm 繼承 table 容器欄目 HTML 简体版

原文原文鏈接

HTML表格組成:

由<table>標籤以及一個或多個<tr>、<th>或<td>標籤：html

<table> 標籤：用來定義表格，整個表格包含在<table></table>標籤中；
<tr>標籤：用來定義表格中一個行，它是單元格的容器，每行能夠包含有多個單元格，由<tr></tr>標籤表示；
<td>標籤和<th>標籤：用來定義單元格，全部單元格都在<th>標籤內，每一個單元格由一對<td></td>標籤或一對<th></th>標籤表示，具體的表格內容放置在這一對<td>標籤或<th>標籤之中，其中th標籤中的內容默認以粗體、居中的方式顯示。

其語法以下：字體

<table>
    <tr>
        <th>1行1列的內容</th>
        <th>1行2列的內容</th>
        …
    </tr>
    <tr>
        <td>2行1列的內容</td>
        <td>2行2列的內容</td>
        …
    </tr>
    …
</table>

<tr>必須在一個<table></table>裏面,它不能單獨使用,至關於<table>的屬性標籤;

table標籤屬性:

1）border標籤屬性：設定圍繞表格的邊框的寬度。實際上border標籤屬性不只設置圍繞表格邊框的寬度，還爲每一個單元格添加寬度爲1px的邊框；
例：spa

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>border標籤屬性</title>    
    <style>
        table{                
            border: 15px solid #000;
        }
        th,td{                
            border: 1px solid #000;
        }            
    </style>
    </head>
    <body>        
        <table >
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

2）width標籤屬性：設定表格的寬度；不建議經過width標籤屬性設置表格寬度，建議向table標籤添加width樣式屬性進行設置。code

px :設置以像素計的寬度（例：width="100px"）
%：設置以包含元素的百分比計的寬度（例：width="100%"）

例：htm

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>width標籤屬性</title>    
    <style>
        table{                
            width:"80%"；
        }
    </style>
    </head>
    <body>        
        <table  border="15px">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

3）align標籤屬性：指定表格相對於周圍標籤的對齊方式,建議向table標籤添加樣式屬性進行設置;
屬性值：繼承

left：左對齊表格
right：右對齊表格
center：居中對齊表格

（1）經過float樣式屬性實現左右對齊；ci

left：元素向左浮動
right：元素向右浮動
none：默認值，元素不浮動
inherit：規定應該從父元素繼承float屬性的值

（2）經過margin樣式屬性實現居中對齊；it

margin:0 auto;

例:table

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>align標籤屬性</title>    
    <style>
        table{                
            margin: 0 auto；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width="80%">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

4）cellspacing 標籤屬性：設定單元格之間的間距（單位：px）,建議向table標籤添加border-spacing樣式屬性進行設置;
例:容器

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>cellspacing標籤屬性</title>    
    <style>
        table{                
            border-spacing: 0；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

5）cellpadding標籤屬性：設定單元邊沿與單元內容之間的間距（單位：px），建議向td或th標籤添加padding樣式屬性來實現；
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>cellspacing標籤屬性</title>    
    <style>
        table{                
            padding: 8px；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%" cellspacing="0">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

6）bgcolor標籤屬性：設置表格背景顏色；

color_name：規定顏色值爲顏色名稱的背景顏色
hex_number：規定顏色值爲十六進制的背景顏色
rgb_number：規定顏色值爲rgb代碼的背景顏色

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>bgcolor標籤屬性</title>    
    <style>
        table{                
            background-color: "red"；
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%" cellspacing="0">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

7）border-collapse樣式屬性：設置表格的邊框是否被合併爲一個單一的邊框；

separate:默認值，邊框會被分開；
collapse:邊框會合併爲一個單一的邊框；
inherit:規定應該從父元素繼承border-collapse屬性的值；

例:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>border-collapse樣式屬性</title>    
    <style>
        table{                
            font: 12px;/*字體大小*/
            padding:10px;/*單元格邊框與內容之間的間距*/
            border: 1px solid #000;/*表格邊框*/
        }
    </style>
    </head>
    <body>        
        <table style= border-collapse："collapse;">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

用標籤屬性完成一個表格：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <style>
            table{                
                border: 1px solid black;
                width: 20%;    
                /*float:right;*/
                margin: 0 auto;
                border-spacing:0 ;
                background-color: red;
                border-collapse: collapse;
            }
            td{                
                border: 1px solid black;
                padding: 10px;
            }            
        </style>
    </head>
    <body>        
        <table >
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>                
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
        </table>
    </body>
</html>

<tr>標籤屬性：

1）align標籤屬性：設置表格行中單元格內容的水平對齊方式；

left：左對齊內容（默認值）
right：右對齊內容
center：居中對齊內容（th元素的默認值）
justify：對行進行伸展，這樣每行均可以有相等的長度
char：將內容對準指定字符

2）valign標籤屬性：設置表格行中單元格內容的垂直對齊方式；

top：對內容進行上對齊
middle：對內容進行居中對齊（默認值）
bottom：對內容進行下對齊
baseline：與基線對齊

3）bgcolor標籤屬性：設定表格行的背景顏色

color_name：規定顏色值爲顏色名稱的背景顏色
hex_number：規定顏色值爲十六進制的背景顏色
rgb_number：規定顏色值爲rgb代碼的背景顏色

例：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
    
            table{
                border: 1px solid black;
                width: 20%;    
                /*float:right;*/
                margin: 0 auto;
                border-spacing:0 ;
                background-color: red;
                border-collapse: collapse;
            }
            tr{
                height: 50px;
                text-align: center;
                vertical-align: top;
                background-color: salmon;                
            }
            td{        
                border: 1px solid black;
            }
            
        </style>
    </head>
    <body>
        <table >
            <tr valign="top">
                <td> 1 </td> <td> 1 </td> <td> 1 </td>            
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
            <tr>
                <td> 1 </td> <td> 1 </td> <td> 1 </td>
            </tr>
        </table>
    </body>
</html>

<th>和<td>標籤屬性：

1）width標籤屬性與height標籤屬性：設定單元格的寬度和高度

pixels :設置以像素計的寬度（例：width="100px"）
percent：設置以包含元素的百分比計的寬度（例：width="100%"）

2）bgcolor標籤屬性：設定單元格背景顏色

color_name：規定顏色值爲顏色名稱的背景顏色
hex_number：規定顏色值爲十六進制的背景顏色
rgb_number：規定顏色值爲rgb代碼的背景顏色

3）align標籤屬性：設置單元格內容的水平對齊方式

left：左對齊內容（默認值）
right：右對齊內容
center：居中對齊內容（th元素的默認值）
justify：對行進行伸展，這樣每行均可以有相等的長度
char：將內容對準指定字符

4）valign標籤屬性：設置單元格內容的垂直對齊方式

top：對內容進行上對齊
middle：對內容進行居中對齊（默認值）
bottom：對內容進行下對齊
baseline：與基線對齊

5）colspan樣式屬性：設置單元格橫跨多少列
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>colspan標籤屬性</title>    
    <style>
        #title {                
            text-align: center；
            font-weight: bold;
        }
    </style>
    </head>
    <body>        
        <table  border="15px"  width= "80%" cellspacing="0">
            <tr>
                    <td colspan="3" id="title"></td>
            </tr>
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 性別</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td> 男 </td>
            </tr>
        </table>
    </body>
</html>

6）rowspan樣式屬性：設置單元格橫跨多少行
例：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>rowspan標籤屬性</title>    
    </head>
    <body>        
        <table  border="15px"  width= "30%" cellspacing="0">
            <tr>
                 <td colspan="4" style="text-align: center;">上午</td>
                 <td>語文</td>
            </tr>
            <tr>
                <td> 化學</td>     
            </tr>
            <tr>
                <td> 歷史</td>     
            </tr>
            <tr>
                <td> 政治</td>     
            </tr>
        </table>
    </body>
</html>

7）nowrap標籤屬性：設定單元格的內容是否換行
使用table表的知識完成以下操做：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>nowrap標籤屬性</title>    
    </head>
    <body>        
        <table  border="1px"  width= "100%" cellspacing="0">
            <tr>
                <th> 姓名 </th>     
                <th> 年齡</th>
                 <th> 地址</th>     
            </tr>
            <tr>
                <td> 張三</td>     
                <td> 19 </td>
                 <td nowrap="nowrap">北京市海淀區  </td>
            </tr>
        </table>
    </body>
</html>

、	標示行中的一個列,須要嵌套在

相關標籤/搜索

每日一句

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