zoukankan      html  css  js  c++  java
  • 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标签的人

  • 相关阅读:
    Educational Codeforces Round 80 (Rated for Div. 2)
    寒假集训
    HDU-4609 3-idiots
    部分分式展开法
    线性同余方程组
    爬取哔哩哔哩python搜索结果
    数据可视化练习题
    python正则表达式
    git的安装和基础知识
    python学习计划
  • 原文地址:https://www.cnblogs.com/LCH-M/p/9333977.html
Copyright © 2011-2022 走看看