碼上歡樂
相關內容    簡體    繁體

用HTML創建表格

本文轉載自   查看原文   2019-08-01 21:21   1711 

 

5.1 表格基本結構（<table>)

建立一個最基本的表格，必須包含一組<table></table>標記、一組<tr></tr>標記以及一組<td></td>標記，這也是最簡單的單元格表格。<table></table>標記的作用是定義一個表格，<tr></tr>標記的作用是定義一行，而<td></td>標記的作用是定義一個單元格。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>單元格</title>
    </head>
    
    <body>
        <center>
            <table border=1>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                    <td>A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
            </table>
        </center>
    </body>

</html>

注：

  • table標記：他用於標識一個表格。就如同body標記一樣，告訴瀏覽器這是一個表格。table標記中設置了一個boder屬性（border=1），它的作用是將表格的邊框線粗細設置為1像素。
  • tr標記：它用於標識表格的一行，也就是建立一行表格。代碼中多少個trtr標記，就表示有多少行的表格。
  • td標記：它用於標記表格的一列，也就是建立一個單元格，它必須放在tr標記里使用，一個tr標記內有多少個td就表示這行里有多少列或是說有多少個單元格。

5.2 合並單元格

在HTML中合並的方向有兩種，一種是上下合並，一種是左右合並，這兩種合並方式各有不同的屬性設定方法。

5.2.1 用colspan屬性左右合並單元格

 可以看到在<td>標記中，將colspan屬性設置為“2”，這個單元格就會橫跨兩列。這樣它后面的A4單元格仍然在原來的位置。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>左右合並單元格</title>
    </head>
    
    <body>
        <center>
            <table border="1">
                <tr>
                    <td>A1</td>
                    <td colspan="2">A2 A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
        </center>
        </table>
    </body>

</html>

注：合並單元格之后，相應的單元格標記就會減少，例如這里原來的A3單元格的<td>和</td>標記就要被去掉了。

5.2.2 用rowspan屬性上下合並單元格<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下合並單元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2">A2<br>B2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

注：要合並單元格就一定會有一些單元格會被“犧牲”掉，這次要將A2與A3單元格合並，那么被犧牲的就是A3單元格，而在A2的<td>標簽中設置了rowspan屬性，這里rowspan=2的意思就是“這個單元格上下連跨了2格”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合並更多單元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2" colspan="2">A2A3<br>B2B3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

5.3 用align屬性設置對齊方式

設置為居中對齊：只要在<td>中加入“ALIGN=CENTER”。

注：

  • 居中對齊：center
  • 底部對齊：bottom
  • 左部對齊：left
  • 右部對齊；right

 

<table border="1" height="150" width="200">
    <tr>
        <td>A1</td>
        <td align="center" rowspan="2" colspan="2">A2A3
            <br>B2B3</td>
        <td>A4</td>
    </tr>

 

 

---恢復內容結束---

5.1 表格基本結構（<table>)

建立一個最基本的表格，必須包含一組<table></table>標記、一組<tr></tr>標記以及一組<td></td>標記，這也是最簡單的單元格表格。<table></table>標記的作用是定義一個表格，<tr></tr>標記的作用是定義一行，而<td></td>標記的作用是定義一個單元格。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>單元格</title>
    </head>
    
    <body>
        <center>
            <table border=1>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                    <td>A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
            </table>
        </center>
    </body>

</html>

注：

  • table標記：他用於標識一個表格。就如同body標記一樣，告訴瀏覽器這是一個表格。table標記中設置了一個boder屬性（border=1），它的作用是將表格的邊框線粗細設置為1像素。
  • tr標記：它用於標識表格的一行，也就是建立一行表格。代碼中多少個trtr標記，就表示有多少行的表格。
  • td標記：它用於標記表格的一列，也就是建立一個單元格，它必須放在tr標記里使用，一個tr標記內有多少個td就表示這行里有多少列或是說有多少個單元格。

5.2 合並單元格

在HTML中合並的方向有兩種，一種是上下合並，一種是左右合並，這兩種合並方式各有不同的屬性設定方法。

5.2.1 用colspan屬性左右合並單元格

 可以看到在<td>標記中，將colspan屬性設置為“2”，這個單元格就會橫跨兩列。這樣它后面的A4單元格仍然在原來的位置。

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>左右合並單元格</title>
    </head>
    
    <body>
        <center>
            <table border="1">
                <tr>
                    <td>A1</td>
                    <td colspan="2">A2 A3</td>
                    <td>A4</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                    <td>B4</td>
                </tr>
                <tr>
                    <td>C1</td>
                    <td>C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
        </center>
        </table>
    </body>

</html>

注：合並單元格之后，相應的單元格標記就會減少，例如這里原來的A3單元格的<td>和</td>標記就要被去掉了。

5.2.2 用rowspan屬性上下合並單元格<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下合並單元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2">A2<br>B2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

注：要合並單元格就一定會有一些單元格會被“犧牲”掉，這次要將A2與A3單元格合並，那么被犧牲的就是A3單元格，而在A2的<td>標簽中設置了rowspan屬性，這里rowspan=2的意思就是“這個單元格上下連跨了2格”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合並更多單元格</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>A1</td>
            <td rowspan="2" colspan="2">A2A3<br>B2B3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>
</body>
</html>

5.3 用align屬性設置對齊方式

設置為居中對齊：只要在<td>中加入“ALIGN=CENTER”。

注：

  • 居中對齊：center
  • 底部對齊：bottom
  • 左部對齊：left
  • 右部對齊；right

 

<table border="1" height="150" width="200">
    <tr>
        <td>A1</td>
        <td align="center" rowspan="2" colspan="2">A2A3
            <br>B2B3</td>
        <td>A4</td>
    </tr>

 

 可以使用valign屬性使表格內文字靠上方或靠下方等。valign屬性可以設置為“top”、“middle”或者“bottom”，分別表示豎直靠上、數值居中和豎直靠下對齊，其中豎直居中是默認值。

<center>
    <table border="1" height="150" width="200">
        <tr>
            <td>A1</td>
            <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td>
            <td>A4</td>
        </tr>
        <tr valign="top">
            <td>B1</td>
            <td>B4</td>
        </tr>
        <tr align="right">
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>
</center>

 

注：

  • left，right，center用align；
  • bottom，top用valign。

 5.4 用bgcolor屬性設置表格背景色和邊框顏色

設置背景色的屬性是bgcolor，可以為<table>,<tr>或者<td>設置bgcolor屬性。如果在<table>標記中設置bgcolor屬性，將設置整個表格的背景色；如果在<tr>標記中設置bgcolor屬性，將設置該行的背景色；如果在<td>標記中設置bgcolor屬性，則僅設置該單元格的背景色。

 

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>背景色</title>
    </head>
    
    <body>
        <center>
            <table bgcolor="#CCCCCC" border="1" height="150" width="200">
                <tr>
                    <td>A1</td>
                    <td align="center" rowspan="2" colspan="2">A2A3
                        <br>B2B3</td>
                    <td>A4</td>
                </tr>
                <tr valign="bottom">
                    <td>B1</td>
                    <td>B4</td>
                </tr>
                <tr bgcolor="#999999" align="right">
                    <td>C1</td>
                    <td bgcolor="#555555">C2</td>
                    <td>C3</td>
                    <td>C4</td>
                </tr>
            </table>
        </center>
    </body>

</html>

 

 5.5 玩完整的表格標記（<thead>、<tbody>和<tfoot>)

從表格結構的角度來說，可以把表格的行分組，稱為“行組”。不同的行組具有不同的意義。行組分為3類——“表頭”、“主體”和“腳注”。三者相應的HTML標記依次為<thead>、<tbody>和<tfoot>。

在一行中，除了<td>標記表示一個單元格外，還可以使用<td>表示該單元格是這一行的“行頭”。

 

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>表格演示</title>
    </head>
    <center>
        
        <body>
            <table width="400" border="1" bordercolor="#003399">
                <thead>
                    <tr>
                        <th colspan="2">產品</th>
                        <th colspan="2">描述信息</th>
                    </tr>
                    <tr>
                        <tr align="center">
                            <td>公司</td>
                            <td>編號</td>
                            <td>用途</td>
                            <td>價格</td>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2">眾生</th>
                        <td>DZ-1</td>
                        <td>中端客戶</td>
                        <td>100.00</td>
                    </tr>
                    <tr>
                        <td>DZ-2</td>
                        <td>低端客戶</td>
                        <td>50.00</td>
                    </tr>
                    <tr>
                        <th rowspan="2">眾生</th>
                        <td>JY-1</td>
                        <td>高端客戶</td>
                        <td>200.00</td>
                    </tr>
                    <tr>
                        <td>JY-2</td>
                        <td>中端客戶</td>
                        <td>100.00</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>120.00</td>
                    </tr>
                </tfoot>
            </table>
        </body>
    </center>

</html>

 

 

 注：第1行和第2行被放在了<thead>和</thead>之間，表示這兩行是表格的行頭；接下來的4行被放在了<tbody>和</tbody>之間，表示這兩行是表格的主體部分；最后一行被放在了<tfoot>和</tfoot>之間，表示這行是表格的腳注部分。此外，還有4個單元格是使用<th>標記而不是<td>標記定義的。

用<th>標記定義單元格，其內容會以粗體顯示。而設置了行組以后，外在的效果並沒有特殊之處。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 PostgreSQL 創建表格 7-4.創建表格 oracle創建表格 MySQL創建表格 如何用js創建表格？ js 動態創建表格 jquery動態創建表格 JS動態創建表格 JS創建表格完整 jquery動態創建表格
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM