• HTML 表格


    HTML 表格:
    表格由<table>标签来定义,行数由<tr>标签来定义,单元格由<td>标签来定义;
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    在浏览器显示如下:
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2


    表格和边框属性:
    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
    使用边框属性来显示一个带有边框的表格:
    <table border="1">
    <tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
    </tr>
    </table>

    表格的表头
    表格的表头使用 <th> 标签进行定义。
    大多数浏览器会把表头显示为粗体居中的文本:
    <table border="1">
    <tr>
    <th>Heading</th>
    <th>Another Heading</th>
    </tr>
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    在浏览器显示如下:
    Heading Another Heading
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2
    表格中的空单元格
    在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td></td>
    <td>row 2, cell 2</td>
    </tr>
    </table>

    这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    在浏览器中显示如下:
    row 1, cell 1 row 1, cell 2
    row 2, cell 2


    <html>

    <body>

    <p>每个表格由 table 标签开始。</p>
    <p>每个表格行由 tr 标签开始。</p>
    <p>每个表格数据由 td 标签开始。</p>

    <h4>一列:</h4>
    <table border="1">
    <tr>
    <td>100</td>
    </tr>
    </table>

    <h4>一行三列:</h4>
    <table border="1">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    </table>

    <h4>两行三列:</h4>
    <table border="1">
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    </tr>
    </table>

    </body>
    </html>

    <!各种边框>
    <html>

    <body>

    <h4>带有普通的边框:</h4>
    <table border="1">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    <h4>带有粗的边框:</h4>
    <table border="8">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    <h4>带有很粗的边框:</h4>
    <table border="15">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    </body>
    </html>

    表格中的heading(表头)
    <html>

    <body>

    <h4>表头:</h4>
    <table border="1">
    <tr>
    <th>姓名</th>
    <th>电话</th>
    <th>电话</th>
    </tr>
    <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
    </tr>
    </table>

    <h4>垂直的表头:</h4>
    <table border="1">
    <tr>
    <th>姓名</th>
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th>电话</th>
    <td>555 77 854</td>
    </tr>
    <tr>
    <th>电话</th>
    <td>555 77 855</td>
    </tr>
    </table>

    </body>
    </html>

    <!空单元格>
    <html>

    <body>

    <table border="1">
    <tr>
    <td>Some text</td>
    <td>Some text</td>
    </tr>
    <tr>
    <td></td>
    <td>Some text</td>
    </tr>
    </table>

    <p>正如您看到的,其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后,仍然没有边框。</p>

    <p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>

    <p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体,请阅读关于字符实体的章节。</p>

    <p>no-breaking 空格由和号开始 ("&"),然后是字符"nbsp",并以分号结尾(";")。</p>

    </body>
    </html>


    <!带有标题的表格>
    <html>

    <body>

    <h4>这个表格有一个标题,以及粗边框:</h4>

    <table border="6">
    <caption>我的标题</caption>
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    </tr>
    <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    </tr>
    </table>

    </body>


    <!跨行或跨列的表格单元格>
    <html>

    <body>

    <h4>横跨两列的单元格:</h4>
    <table border="1">
    <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
    </tr>
    <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
    </tr>
    </table>

    <h4>横跨两行的单元格:</h4>
    <table border="1">
    <tr>
    <th>姓名</th>
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th rowspan="2">电话</th>
    <td>555 77 854</td>
    </tr>
    <tr>
    <td>555 77 855</td>
    </tr>
    </table>

    </body>
    </html>

    <!表格内的标签>
    <html>

    <body>

    <table border="1">
    <tr>
    <td>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    </td>
    <td>这个单元包含一个表格:
    <table border="1">
    <tr>
    <td>A</td>
    <td>B</td>
    </tr>
    <tr>
    <td>C</td>
    <td>D</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>这个单元包含一个列表:
    <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
    </ul>
    </td>
    <td>HELLO</td>
    </tr>
    </table>

    </body>
    </html>

    <!单元格的边距>
    <html>

    <body>

    <h4>没有 cellpadding:</h4>
    <table border="1">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    <h4>带有 cellpadding:</h4>
    <table border="1"
    cellpadding="10">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    </body>
    </html>

    <!单元格的间距>
    <html>

    <body>

    <h4>没有 cellspacing:</h4>
    <table border="1">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    <h4>带有 cellspacing:</h4>
    <table border="1"
    cellspacing="10">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    </body>
    </html>

    <!给表格设置背景颜色和背景图案>
    <html>

    <body>

    <h4>背景颜色:</h4>
    <table border="1"
    bgcolor="red">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    <h4>背景图像:</h4>
    <table border="1"
    background="/i/eg_bg_07.gif">
    <tr>
    <td>First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td>Second</td>
    <td>Row</td>
    </tr>
    </table>

    </body>
    </html>


    <!给单元格添加背景颜色和背景图案>
    <html>

    <body>

    <h4>单元背景:</h4>
    <table border="1">
    <tr>
    <td bgcolor="red">First</td>
    <td>Row</td>
    </tr>
    <tr>
    <td
    background="/i/eg_bg_07.gif">
    Second</td>
    <td>Row</td>
    </tr>
    </table>

    </body>
    </html>

    <!表格中的内容排列>
    <html>

    <body>

    <table width="400" border="1">
    <tr>
    <th align="left">消费项目....</th>
    <th align="right">一月</th>
    <th align="right">二月</th>
    </tr>
    <tr>
    <td align="left">衣服</td>
    <td align="right">$241.10</td>
    <td align="right">$50.20</td>
    </tr>
    <tr>
    <td align="left">化妆品</td>
    <td align="right">$30.00</td>
    <td align="right">$44.45</td>
    </tr>
    <tr>
    <td align="left">食物</td>
    <td align="right">$730.40</td>
    <td align="right">$650.00</td>
    </tr>
    <tr>
    <th align="left">总计</th>
    <th align="right">$1001.50</th>
    <th align="right">$744.65</th>
    </tr>
    </table>

    </body>
    </html>

    <!框架frame属性>
    <html>
    <body>

    <p><b>注释:</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

    <p>Table with frame="box":</p>
    <table frame="box">
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>

    <p>Table with frame="above":</p>
    <table frame="above">
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>

    <p>Table with frame="below":</p>
    <table frame="below">
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>

    <p>Table with frame="hsides":</p>
    <table frame="hsides">
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>

    <p>Table with frame="vsides":</p>
    <table frame="vsides" >
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>January</td>
    <td>$100</td>
    </tr>
    </table>

    </body>
    </html>

    表格标签:
    表格 描述
    <table> 定义表格
    <caption> 定义表格标题。
    <th> 定义表格的表头。
    <tr> 定义表格的行。
    <td> 定义表格单元。
    <thead> 定义表格的页眉。
    <tbody> 定义表格的主体。
    <tfoot> 定义表格的页脚。
    <col> 定义用于表格列的属性。
    <colgroup> 定义表格列的组。

    这个神经病来自七院,又哭又笑的像一只老鬼
  • 相关阅读:
    循环的中断
    创建.NET应用程序所经历的步骤
    完整的开发一个ContentProvider步骤
    Perl 基于OOP的数据库链接(增删改查)
    Perl 基于OOP的数据库链接(优化)
    Perl 基于OOP的数据库链接
    Perl oop链接数据库
    Perl oop研究
    PythonStudy——内存管理机制 Memory management mechanism
    博客园美化——Design by Venti
  • 原文地址:https://www.cnblogs.com/commanderzhu/p/5246252.html
Copyright © 2020-2023  润新知