表格

時間 2019-12-13

標籤表格简体版

原文原文鏈接

沒有css以前，表格是最流行的佈局頁面方法。它表示一種佈局頁面的方法，不單單只是指單元格組成的表格。css

1.製做普通表格：
表格屬於結構性標籤，要用<table>來進行建立。一個最簡單的表格也須要具有表頭/行和列的信息。
<table>
　　<tr>
　　　　<th>Head1</th>
　　　　<th>Head2</th>
　　</tr>
　　<tr>
　　　　<td>row 1,cell 1</td>
　　　　<td>row 1,cell 2</td>
　　　</tr>
　　<tr>
　　　　<td>row 2,cell 1</td>
　　　　<td>row 2,cell 2</td>
　　</tr>

</table>html

在HTML中，首先用<tr>來定義行。如這裏有三行，在<table>中先定義三組<tr>標籤。接着用<td>來定義每個單元格，<th>表示的是表頭單元格。佈局

2.表格的基本屬性：
行高height屬性設置每一行單元格的行高。
<style>
　　table{
　　　　height:185px;
　　}
　　table th{
　　　　height:32px;
　　}
</style>spa

寬度width屬性差很少，不過通常都是在<tr>或<th>標籤裏面改code

3.合併單元格：
合併同行單元格用colsplan屬性。合併同列單元格使用row<html>htm

    <head>
        <title>合併表格中的單元格</title>
    </head>
    <body>
        <h3>就一個表格</he>
        <table width="305" height="156" border="1">//設置表格的長寬，邊框的粗細 <tr>
                <td width="70px" height="50">1</td>
                <td width="70px">2</td>
                <td width="70px">3</td>
                <td width="70px">4</td>
            </tr>
            <tr>
                <td height="50">5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td height="50">9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
    
        </table>
        <p><h3>合併單元表格後</h3></p>
        <table width="305" height="156" border="1">
            <tr>
                <td height="50" colspan="2">1&amp;2</td>//合併同行單元格 <td width="70px">3</td>
                <td width="70" rowspan="3">4&amp;8&amp;12</td>//合併同列單元格 </tr>
            <tr>
                <td height="50" width="70">5</td>
                <td width="70">6</td>
                <td>7</td>
            </tr>
            <tr>
                <td height="70">9</td>
                <td>10</td>
                <td>11</td>
            </tr>
        </table>

    </body>
</html>

4.表格標題：blog

<caption>標籤是用來定義表格的標題的，它必須緊跟着<table>標籤後面。three

5.拆分表格：
爲了便於將表格定位給css樣式表，有時候不但願一直是<tr>標籤，能夠用thead，tfoot，tbody來拆分表格。
Thead定義了表格的首行，tfoot定義了表格的尾行，tbody定義了表格的主題部分。
注意，若是使用了其中一個，那麼所有元素都要用上，並且要按順序出現。（tbody能夠出現屢次，那兩個只能出現一次）圖片

6.設置表格的列：
能夠用<colgroup>標籤訂義表格列的分組。這個標籤常常和其餘兩個標籤配合用，一個是<col>標籤，一個是<span>標籤。
<col>表示表格中一個或多個列定義屬性值。是僅包含屬性的空元素。只能在表格或colgroup中使用此元素。it

<html>
    <head>
        <title>使用<colgroup>和<col>定義表格的列</title>
        <style type="text/css">
            caption{
                font-weight:bold;
                color:#000;
            }
            .one{
                background:cyan;
                text-align:center;
            }
            .two{
                background:ffee22;
                text-align:center;
            }
            .three{
                background:silver;
                text-align:center;
            }
            .four{
                background:#F1B005;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <table width="500" height="280" border="1">
            <caption>使用「colgroup」和「col」定義表格的列</caption>
            <colgroup class="one"></colgroup>
            <colgroup>
                <col class="two"></col>
                <col class="three"></col>
                <col class="four"></col>
            </colgroup>
            <tr>
                <th>排名</th>
                <th>金牌</th>
                <th>銀牌</th>
                <th>銅牌</th>
            </tr>
            <tr>
                <td>中國</td>
                <td>51</td>
                <td>21</td>
                <td>28</td>
            </tr>
            <tr>
                <td>美國</td>
                <td>36</td>
                <td>38</td>
                <td>36</td>
            </tr>
            <tr>
                <td>俄羅斯</td>
                <td>23</td>
                <td>21</td>
                <td>28</td>
            </tr>
        </table>
    </body>
</html>

也能夠用span屬性

<table>

　　</colgroup>

</table>

這裏就是表示前三列的意思。

7.修飾單元格：
經過css嗾使單元格的邊框修改邊框能夠用到border屬性
Border:2px solid red;
<style type="text/css">
Table{
Border:3px blue;
}
.doted{
Border:3px dotted;//斷斷續續的邊框
}
.dashed{
Border:3px double;//雙邊線的邊框
}
.groove{
Border:3px groove;//外陰影的邊框
}
</style>
還能夠分別針對一個單元格的每一條邊進行定義。如：
{border-left:2px dotted;}
還有border-top,border-right,border-bottom

8.合併相鄰單元格：
<table>標籤制定的表格會在全部的單元格以外再框上一個四邊形，而每個單元格又是獨立存在的。因此單元格和單元格之間總像是有一條縫隙。有一種方法能夠消除這條縫隙，就是使用「邊框擠壓」的屬性border-collapse
{border-collapse:collapse;}
還有單元格之間分離
(border-collapse:separate;)

9.編輯單元格中的內容：
表格是由許多個單元格組成，而這些單元格里面又能夠放入各類不一樣類型的頁面內容。如文本，圖片，超連接等。甚至能夠放入新的表格。
使用(table-layout:fixed;)這個屬性能夠限制單元格隨文本長度而改變。（其實就是定死單元格的大小）

10.修飾單元格中的內容：
經過定義單元格中的文本時，能夠專門地指定某一行，某一列或者是整個表格。
td{
Text-align:center;
Color:#334542;
Background-color:#ddd;
}
下面給出一些樣式表能夠放入的屬性：
border:全部四條邊的屬性設置到一個聲明中
border-style設置元素全部邊框的樣式，或者單獨地爲各變設置邊框樣式。

相關標籤/搜索

每日一句

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