zoukankan      html  css  js  c++  java
  • table基础布局

    第一步;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表格布局</title>
        </head>
        <body>
            <table border="1" width="100%">
                <tr height="150px"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td width="350px">&nbsp;</td><td>
                <table width="535px" height="300px" background="img/liqingzhao.jpg">
                <tr><td>abc</td><td>def</td></tr>
                <tr><td>abc</td><td>
                <table border="1">
                    <tr><td>用户名</td><td><input type="text" name="user"></td></tr>
                    <tr><td>密码框</td><td><input type="password" name="pass"></td></tr>
                    <tr><td colspan="2"></td></tr>
                    <tr><td colspan="2"></td></tr>
                </table>
                </td></tr>    
                <tr><td>abc</td><td>def</td></tr>    
                </table>
            </td><td>&nbsp;</td></tr>
                <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    
            </table>
        </body>
    </html>
    View Code

    第二步;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表格布局</title>
        </head>
        <body>
            <table border="0" width="100%">
                <tr height="150px"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td width="350px">&nbsp;</td><td>
                <table width="535px" height="300px" background="img/liqingzhao.jpg" border="0">
                <tr height="60px"><td>abc</td><td>def</td></tr>
                <tr><td width="230px">abc</td><td>
                <table border="0" height="100%">
                    <tr><td>用户名</td><td><input type="text" name="user"></td></tr>
                    <tr><td>密码框</td><td><input type="password" name="pass"></td></tr>
                    <tr><td colspan="2"><input type="submit" value="进入邮箱">
                    <input type="reset" value="重新填写"></td></tr>
                    <tr><td colspan="2"><a href="#">找回密码</a><a href="#">注册新用户</a></td></tr>
                </table>
                </td></tr>    
                <tr><td>abc</td><td>def</td></tr>    
                </table>
            </td><td>&nbsp;</td></tr>
                <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    
            </table>
        </body>
    </html>
    View Code

    第三步:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>表格布局</title>
        </head>
        <body>
            <table border="0" width="100%">
                <tr height="150px"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td width="350px">&nbsp;</td><td>
                <table width="535px" height="300px" background="img/liqingzhao.jpg" border="0">
                <tr height="60px"><td>abc</td><td>def</td></tr>
                <tr><td width="230px">abc</td><td>
                <form method="post" action="html1.html">
                <table border="0" height="100%">
                    <tr><td>用户名</td><td><input type="text" name="user"></td></tr>
                    <tr><td>密码框</td><td><input type="password" name="pass"></td></tr>
                    <tr><td colspan="2"><input type="submit" value="进入邮箱">
                    <input type="reset" value="重新填写"></td></tr>
                    <tr><td colspan="2"><a href="#">找回密码</a><a href="#">注册新用户</a></td></tr>
                </table>
                </form>
                </td></tr>    
                <tr><td>abc</td><td>def</td></tr>    
                </table>
            </td><td>&nbsp;</td></tr>
                <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    
            </table>
        </body>
    </html>
    View Code
  • 相关阅读:
    开始学习编写用于 Windows SideShow 设备的小工具【转】
    Windows Mobile 6.5 Developer Tool Kit 下载
    Microsoft Security Essentials 微软免费杀毒软件下载
    SQL Server 2008 空间数据存储摘抄(SRID 点 MultiPoint LineString MultiLineString 多边形 MultiPolygon GeometryCollection)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (2)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (4)
    负载测试、压力测试和性能测试的异同
    Windows Server 2008 Vista Sidebar Gadget (侧边栏小工具) 入门开发实例
    Silverlight Tools 安装失败 解决办法
    SQL Server 2008 空间数据库 空间索引概念及创建(取自帮助)
  • 原文地址:https://www.cnblogs.com/helloworld2019/p/10895500.html
Copyright © 2011-2022 走看看