HTML&CSS基礎-表格簡介


             HTML&CSS基礎-表格簡介

                                          作者:尹正傑

版權聲明:原創作品,謝絕轉載!否則將追究法律責任。

 

 

一.HTML源代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格簡介</title>
        
    </head>
    <body>
        <!--
            表格在日常生活中使用的非常多,比如Excel就是專門用來創建表格的工具。
            表格就是用來表示一些格式化數據的,比如:"課程表","銀行對賬單",在網頁中也可以創建出不同的表格。
        -->
        
        <!--
            在HTML中,使用table標簽來創建一個表格,表格中有以下幾個常用屬性:
                border:
                    等設置為"1"時,表示顯示邊框。
                width:
                    可以為表格設置邊框
                 align:
                     當其值為"center"時就可以居中
            雖然咱們可以直接在標簽設置樣式,但是官網建議咱們在CSS修改樣式喲~
            
            溫馨提示:
                table是一個塊元素
        -->
        <table border="1" width="40%" align="center">
            <!--
                在table標簽中使用tr來表示表格中的一行,有幾行就又幾個tr。
            -->
            <tr>
                <!--
                    在tr標簽中需要使用td來創建一個單元格,有幾個單元格就有幾個td
                    rowspan:
                        橫向合並單元格,數字為幾就合並幾個橫向單元格,默認為1.
                -->
                <td>A1</td>
                <td>A2</td>
                <td>A3</td>
                <td rowspan="2">A4</td>
            </tr>
            
            <tr>
                 <td>B1</td>
                <td>B2</td>
                <td>B3</td>
             
            </tr>
            
            <tr>
                <td>C1</td>
                <td>C2</td>
                <td>C3</td>
                <td>C4</td>
            </tr>
            
            <tr>
                <!--
                    在tr標簽中需要使用td來創建一個單元格,有幾個單元格就有幾個td
                    colspan:
                        橫向合並單元格,數字為幾就合並幾個橫向單元格,默認為1.
                        
                -->
                <td>D1</td>
                <td>D2</td>
                <td colspan="2">D3</td>
            </tr>
        </table>
    </body>
</html>

 

二.瀏覽器打開以上代碼渲染結果

 

 

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM