zoukankan      html  css  js  c++  java
  • HTML自学之旅(三)表格

    涉及的内容有点多哦

    <html>
    <body>
    <p>
    每个表格由table标签开始,行由tr开始,数据有td标签开始。
    </p>
    <h4>一列:</h4>
    <table border="1">
    <tr>
    <td>100</td>
    <tr>
    </table>
    
    <h4>一行三列:</h4>
    <table border="2">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    </table>
    
    <h4>两行三列:</h4>
    <table border="0">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    
    <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    </tr>
    </table>
    
    <hr />
    <h4>带有普通边框:</h4>
    <table border="1">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    </table>
    
    <h4>带有粗的边框:</h4>
    <table border="8">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    </table>
    
    <h4>带有很粗的边框:</h4>
    <table border="15">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    </table>
    
    <h4>表格的表头(实际相当于我们做表的时候的列名)</h4>
    <table border="1">
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <tr>
    <td>100</td>
    <td>200</td>
    <td>200</td>
    </tr>
    <tr>
    <td>400</td>
    <td>500</td>
    <td>200</td>
    </tr>
    </table>
    
    <hr />
    <h4>表格中的空单元格:</h4>
    <table border="1">
    <tr>
    <td>100</td>
    <td>200</td>
    <td></td>
    </tr>
    <tr>
    <td>400</td>
    <td></td>
    <td>200</td>
    </tr>
    </table>
    <h4>注意:虽然上一个表中空单元格也显示了边框,但有的浏览器可能就会不显示,为了保险,加入空格占位符</h4>
    
    <table border="1">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>400</td>
    <td>&nbsp;</td>
    <td>200</td>
    </tr>
    </table>
    
    <hr />
    <h4>带有标题的表格:</h4>
    <table border="6">
    <caption>我的标题</caption>
    <tr>
    <td>100</td>
    <td>200</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>400</td>
    <td>&nbsp;</td>
    <td>200</td>
    </tr>
    </table>
    
    <h4>横跨两列的单元格:</h4>
    <table border="6">
    <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
    </tr>
    <tr>
    <td>lixiang</td>
    <td>111133445</td>
    <td>432545</td>
    </tr>
    </table>
    
    <h4>横跨两行的单元格:</h4>
    <table border="6">
    <tr>
    <th>姓名</th>
    <td>lixiang</td>
    </tr>
    <tr>
    <th rowspan="2">电话</th>
    <td>111133445</td>
    </tr>
    <tr>
    <td>432545</td>
    </tr>
    </table>
    
    <hr />
    <h4>表格中的内容可以是不同种类哦:</h4>
    <table border="2">
    <tr>
        <td>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        </td>
    
        <td>这个单元格包含一个表格:
            <table border="2">
                <tr>
                    <td>hello</td>
                    <td>happy</td>
                    <td>AB</td>
                    <td>CD</td>
                        
                </tr>
                
            </table>
        </td>
    </tr>
    <tr>
        <td>这个单元包含一个列表:
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>西瓜</li>
            
            </ul>
        </td>
    
        <td>Hello OK</td>
    </tr>
    
    </table>
    
    <hr />
    <h4>单元格边距:</h4>
    <table border="2"> 
    <caption>不带边距的:</caption>
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    <p>再看带有边距的</p>
    <table border="2" cellpadding="10"> 
    <caption>带边距的:</caption>
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    
    <hr />
    <h4>单元格间距:</h4>
    <table border="2"> 
    <caption>不带间距的:</caption>
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    <p>再看带有间距的</p>
    <table border="2" cellspacing="10"> 
    <caption>带间距的:</caption>
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    
    <hr />
    <h4>表格中添加背景颜色或背景图像:</h4>
    <table border="2" bgcolor="yellow"> 
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    <p>背景图像:</p>
    <table border="2" background="C:\Users\Ideal\Desktop\^_^\webweb\img\table background.png"> 
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    
    <hr />
    <h4>单元格中添加背景颜色或背景图像:</h4>
    <table border="2"> 
    <tr>
        <td bgcolor="red">first</td>
        <td>row</td>
    </tr>
    <tr>
        <td background="C:\Users\Ideal\Desktop\^_^\webweb\img\table background.png">second</td>
        <td>row</td>
    </tr>
    </table>
    
    <hr />
    <h4>在表格中有居左居右等排列形式</h4>
    <table border="2" cellpadding="10" width="400"> 
    <tr>
        <th align="left">消费项目</th>
        <th align="left">一月</th>
        <th align="left">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="right">200</td>
        <td align="right">100</td>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <td align="middle">200</td>
        <td align="middle">100</td>
    </tr>
    <tr>
        <td align="left">食品</td>
        <td align="right">200</td>
        <td align="right">100</td>
    </tr>
    </table>
    <p>垂直方向对其方式(看不出效果的):</p>
    <table border="2" cellpadding="10" width="400" valign="bottom"> 
    <tr>
        <th align="left">消费项目</th>
        <th align="left">一月</th>
        <th align="left">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="right">200</td>
        <td align="right">100</td>
    </tr>
    <tr>
        <td align="left">化妆品</td>
        <td align="middle">200</td>
        <td align="middle">100</td>
    </tr>
    </table>
    
    <hr />
    <h4>frame框架</h4>
    <p>Frame box:frame 也可以在 Internet Explorer 中正确地显示。</p>
    <table frame="box"> 
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    <p>Frame above:</p>
    <table frame="above"> 
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    
    <p>Frame below:</p>
    <table frame="below"> 
    <tr>
        <td>first</td>
        <td>row</td>
    </tr>
    <tr>
        <td>second</td>
        <td>row</td>
    </tr>
    </table>
    
    <hr />
    <h4>colgroup标签</h4>
    <p>colgroup 标签用于对表格中的列进行组合,以便对其进行格式化。
    如需对全部列应用样式,colgroup 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
    colgroup 标签只能在 table 元素中使用。</p>
    <p>下面这个例子,两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式(注意第一个 colgroup 元素横跨两列):</p>
    <table border="6" width="200">
        <colgroup span="2" align="left"></colgroup>
        <colgroup align="right" style="color:color:#0000FF"></colgroup>
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    <tr>
    <td>400</td>
    <td>500</td>
    <td>200</td>
    </tr>
    </table>
    
    </body>
    </html>
  • 相关阅读:
    Zend Framework 2.1.5 中根据服务器的环境配置调用数据库等的不同配置
    在基于 Eclipse 的 IDE 中安装和使用 Emmet(ZenCoding)
    【翻译】Emmet(Zen Coding)官方文档 之六 自定义 Emmet
    【翻译】Emmet(Zen Coding)官方文档 之二 缩写
    【翻译】Emmet(Zen Coding)官方文档 之七 一览表
    【翻译】Emmet(Zen Coding)官方文档 之三 CSS 缩写
    【翻译】Emmet(Zen Coding)官方文档 之四 动作
    【翻译】Emmet(Zen Coding)官方文档 之一 web 编程的必备工具
    Zend Framework 2 时区设置警告问题的解决
    【翻译】Emmet (Zen Coding) 元素类型
  • 原文地址:https://www.cnblogs.com/lx09110718/p/2839584.html
Copyright © 2011-2022 走看看