HTML5表格(table)篇


初學HTML接觸table少不了,但是實際應用的地方也有。

簡單說明HTML <table> 標簽

定義和用法

<table> 標簽定義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

border 定義表格

<tr> 元素定義表格行,<th>元素定義表頭,<td> 元素定義表格單元。

<caption>定義表格標題

colspan 單元格占多少列(跨列)

rowspan 單元格占多少行(跨行)

詳細說明W3school:http://www.w3school.com.cn/tags/tag_table.asp

我這里簡單做來一下表格操作,先上圖。

代碼一:

<!DOCTYPE html>
<html>
    <head>
        <title>
            表格
        </title>
            
    </head>

    <body>
    <br/>
        <table border="3" width="50%" height="90" align="center" bordercolor="black">
            <caption>專業設置表及在校人數表</caption>
            <br/>
            <tr bgcolor="silver" align="center" >
                <th>錄名</th>
                <th colspan="4">專業人數</th>
                
                
            </tr>
                
            <tr align="center">
                <td rowspan="6">計算機科學技術系</td>
                
                <td bgcolor="silver" colspan="4" >計算機科學技術專業</td>
                
                
            </tr>
            <tr align="center">
                
                <td>04級</td>
                <td>03級</td>
                <td>02級</td>
                <td>01級</td>
            </tr>
            <tr align="center"> 
                
                <td>150人</td>
                <td>150人</td>
                <td>150人</td>
                <td>150人</td>
            </tr>
            <tr align="center">
                
                <td colspan="4" bgcolor="silver" >軟件工程專業</td>
                
                
            </tr>
            
            <tr align="center" >
                
                <td>04級</td>
                <td>03級</td>
                <td>02級</td>
                <td>01級</td>
            </tr>
            <tr align="center" >
                
                <td>100人</td>
                <td>20人</td>
                <td>50人</td>
                <td>40人</td>
            </tr>
            <tr align="center">
                <td rowspan="3">英語系</td>
                <td colspan="4" bgcolor="silver">英語專業</td>
                
            </tr>
            <tr align="center">
                
                <td>04級</td>
                <td>03級</td>
                <td>02級</td>
                <td>01級</td>
            </tr>
            
            <tr align="center">
                
                <td>100人</td>
                <td>80人</td>
                <td>50人</td>
                <td>40人</td>
                
            </tr>
            
            
        </table>
    
    
    </body>
</html>
View Code

代碼二:

<!DOCTYPE html>
<html>
    <head>
        <title>
        
        </title>
    </head>
    
    <body>
        <table border="3" width="80%" height="80"  bordercolor="cornflowerblue">
    
            <caption><h1>課程表</h1></caption>
            <br/>
                <tr align="center"> 
                
                    <td>項目</td>
                    <td colspan="5">上課</td>
                    
                    <td colspan="2">休息</td>
                    
                
                </tr>
                
                <tr align="center" bgcolor="pink">
                    <th>星期</th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                    <th>星期日</th>
                </tr>
                
                <tr align="center">
                    <td rowspan="4">上午</td>
                    <td>語文</td>
                    <td>數學</td>
                    <td>英語</td>
                    <td>英語</td>
                    <td>物理</td>
                    <td>計算機</td>
                    <td rowspan="4">休息</td>
                </tr>
                
                <tr align="center">
                    
                    <td>數學</td>
                    <td>數學</td>
                    <td>地理</td>
                    <td>化學</td>
                    <td>歷史</td>
                    <td>計算機</td>
                    
                </tr>
                
                <tr align="center">
                
                    <td>語文</td>
                    <td>數學</td>
                    <td>歷史</td>
                    <td>計算機</td>
                    <td>物理</td>
                    <td>化學</td>
                    
                </tr>
                
                <tr align="center">
                    
                    <td>數學</td>
                    <td>數學</td>
                    <td>地理</td>
                    <td>化學</td>
                    <td>歷史</td>
                    <td>計算機</td>
                
                </tr>
                
                <tr align="center">
                    <td rowspan="2">下午</td>
                    <td>數學</td>
                    <td>數學</td>
                    <td>地理</td>
                    <td>化學</td>
                    <td>歷史</td>
                    <td>計算機</td>
                    <td rowspan="2">休息</td>
                </tr>
            
                <tr align="center">
                
                    <td>數學</td>
                    <td>數學</td>
                    <td>地理</td>
                    <td>化學</td>
                    <td>歷史</td>
                    <td>計算機</td>
                    
                </tr>
            
        </table>
    
    
    </body>
</html>
View Code

希望幫到正在接觸table標簽的人


免責聲明!

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



猜您在找 html5: table表格與頁面布局整理 HTML table 表格邊框 html5 jquery bootstrap table form input 導航 表格 響應式 表單 直接使用 HTML5 簡單的表格制作(1) Html Table 表格 畫斜線 html與表格(table)相關的屬性 html5 table的表頭固定的HTML代碼 Web開發——HTML基礎(HTML表格 html5 jquery bootstrap table 直接使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM
Dynatable – 基於 HTML5 & jQuery 的交互表格插件