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>
  • 相关阅读:
    linux date使用
    SHELL输出带颜色字体
    vimrc配置
    你所不知道的C++
    temp
    说什么好呢3
    Extjs3 Combo实现百度搜索查询
    Extjs3笔记 fbar
    Extjs combo赋值与刷新的先后顺序
    sql中nvarchar(max)长度测试
  • 原文地址:https://www.cnblogs.com/lx09110718/p/2839584.html
Copyright © 2011-2022 走看看