zoukankan      html  css  js  c++  java
  • 如何在 HTML 文档中创建表格<table>

    表格简单默认代码格式:

    <table border="1">
        <tr>
              <td>100</td>
        </tr>
    </table>

    表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。

    字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    HTML 表格标签

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

    单元格边距(Cell padding):Cell padding 来创建单元格内容与其边框之间的空白。

    单元格间距(Cell spacing):Cell spacing 增加单元格之间的距离。

    案例1:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>教程1</title> 
    </head>
    <body>
    
    <p>
    每个表格从一个 table 标签开始。 
    每个表格行从 tr 标签开始。
    每个表格的数据从 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>

    案例1效果如下图:

    案例2:

    <table width="50%" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#ccccc">
    <tr>
        <td height="25" colspan="2" align="center" bgcolor="#F0F0F0">订单信息</td>
      </tr>
      <tr>
        <td width="29%" height="25" align="right" bgcolor="#FFFFFF">订单号:</td>
        <td width="71%" bgcolor="#FFFFFF">&nbsp;S-P1586654454RN545</td>
      </tr>
    <tr>
        <td height="25" align="right" bgcolor="#FFFFFF">单价(元/单位):</td>
        <td height="25" bgcolor="#FFFFFF">&nbsp;35.00</td>
      </tr>
       <tr>
        <td height="25" align="right" bgcolor="#FFFFFF">数量:</td>
        <td height="25" bgcolor="#FFFFFF">&nbsp;1</td>
      </tr>
      <tr>
        <td height="25" align="right" bgcolor="#FFFFFF">支付方式:</td>
        <td height="25" bgcolor="#FFFFFF">&nbsp;货到付款 手续费:0元</td>
      </tr>
       <tr>
        <td height="25" align="right" bgcolor="#FFFFFF">合计(元):</td>
        <td height="25" bgcolor="#FFFFFF">&nbsp;45.21元</td>
      </tr>
      <tr>
        <td height="25" colspan="2" align="right" bgcolor="#F0F0F0" style="padding-right:6px;padding-left:6px;">
          <div style="float:left;">
          <input type="button" name="ss12" value="关闭窗口" style="90px" onClick="window.close();" class='inputbut'>
          </div>
          
          <div style="float:right;">
          <span style="font-weight:bold;">订单总计:</span> <span style="color:red;">45.21</span>元, <span>共 1 页/1条记录</span>
          <div>
        </td>
      </tr>
    </table>

    案例2效果如下图:

    日期:2020.1.22  lzb

    作者:赖忠标
    免责声明:文章、笔记等仅供分享、探讨、参考等学习之用,因此造成的任何后果概不负责。(如有错误、疏忽等问题,欢迎指正、讨论,谢谢)
    本文版权归作者和博客园共有,欢迎转载,但请务必在文章页面明显位置给出原文连接,谢谢配合。
  • 相关阅读:
    一本通1647迷路
    一本通1646GT 考试
    矩阵
    矩阵快速幂
    数学基础
    清北学堂学习经验(论颓废)
    钟皓曦第二天讲课
    P3275 [SCOI2011]糖果
    P1270 “访问”美术馆
    P2015 二叉苹果树
  • 原文地址:https://www.cnblogs.com/lazb/p/14313500.html
Copyright © 2011-2022 走看看