zoukankan      html  css  js  c++  java
  • 11-表格标签

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    
    <!-- 
        表格
            table   表示表格的定义
            tr      表示表格中的行(每一行可以包含一个或多个td或th)
            td      表示表格中的标准单元格
            th      表示表格中的表头(具有标题效果,字体加粗,居中显示)
    
            table常用属性:
                border  表格边框 像素或者百分比 如果是百分比,参考父元素的宽度,如果父元素未设置宽度,则为浏览器宽度
                width   表格的宽度
                ailgn   表格对齐方式(left right center)
            
            tr常用属性:
                align   每行中文本内容的水平方向对齐方式
                valign  每行中文本内容的垂直方向对齐方式
                bgcolor 背景颜色
    
            
            css样式
                border-collapse:collapse;   合并表格边框
            
            合并单元格
                <td>的colspan和rowspan分别规定单元格横跨的列数和行数
                纵向合并    rowspan
                横向合并    colspan
    
     -->
    <body>
        <table border="1px" width="500px" align="center" height="100px" style="border-collapse:collapse;">
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr align="center" valign="top" bgcolor="yellow">
                <td>101班</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr align="right">
                <td>101班</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
            <tr align="left">
                <td>102班</td>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
            </tr>
        </table>
            <hr>
        <table border="1px" align="center" style="border-collapse:collapse;" width="500px">
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td rowspan="2">101班</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <!-- <td>101班</td> -->
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
            <tr>
                <td>102班</td>
                <td>王五</td>
                <td colspan="2"> &nbsp;&nbsp;20&nbsp;&nbsp;&nbsp;&nbsp;男</td>
                
            </tr>
        </table>
    </body>
    </html>
    
    这世上所有美好的东西,都需要踮起脚尖。
  • 相关阅读:
    jQuery自定义漂亮的下拉框插件8种效果演示
    Select-or-Die演示11种美化下拉框select方法
    jQuery超酷下拉插件6种效果演示
    jQuery10种不同动画效果的响应式全屏遮罩层
    jQuery Wheel 环形菜单插件5种效果演示
    js显示隐藏
    js关于函数调用
    php入门
    jquery幻灯片
    Mysql命令大全
  • 原文地址:https://www.cnblogs.com/XMYG/p/14319508.html
Copyright © 2011-2022 走看看