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刪除。



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