• HTML表格


    一、表格的标准结构

    <table>
      <thead>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td></td>
         </tr>
      </tfoot>
    </table>
    • <table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。
    • caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
    • <thead></thead>:用于定义表格的头部,必须位于<table></table>标记中,一般包含网页的logo和导航等头部信息。
    • <tbody></tbody>:用于定义表格的主体,位于<table></table>标记中<tfoot></ tfoot >标记之后,一般包含网页中除头部和底部之外的其他内容。
    • <tfoot></ tfoot >:用于定义表格的页脚,位于<table></table>标记中<thead></thead>标记之后,一般包含网页底部的企业信息等。
    • <tr> 表格行用<tr>标签定义,由单元格构成。多个行结合在一起就构成一个表格,这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示,并用相应的</tr> 结束
    • <td> 表格的每一行又有若干表格单元格,用<td>...</td>标签表示。TD是"表格数据( Table Data)”的英文缩写。<td>标签定义一个列,嵌套于<tr>标签内。 border属性是最常用的属性,可用于定义表格的单元格和结构。该属性指定边框的厚度,如果其值设置为零(0),则不显示边框。
    • <th>标记及其属性 表头一般位于表格的第一行或第一列,其文本加粗居中。设置表头非常简单,只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

    二、属性:写在table开始标签内

    • Border=”1”   边框
    • Width=”500”  宽度
    • Height=”300” 高
    • cellspacing=”2”    单元格与单元格的距离
    • cellpadding=”2”    内容距边框的距离
    • align=”left  |  right  |  center”  
    • 如果直接给表格用align=”center”  表格居中
    • 如果给tr或者td使用   ,tr或者td内容居中。
    • bgcolor=”red”    背景颜色。

    三、单元格合并

    • colspan=”2”  合并同一行上的单元格
    • rowspan=”2”  合并同一列上的单元格

    四、制作细线表格(拓展)

    <table bgcolor="green" width=300px height=400px cellspacing="1">
        <tr bgcolor="white">
            <td ></td>
            <td ></td>
            <td></td>
        </tr >
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
  • 相关阅读:
    动态规划(DP计数):HDU 5117 Fluorescent
    动态规划(DP计数):HDU 5116 Everlasting L
    动态规划(区间DP):HDU 5115 Dire Wolf
    数学(扩展欧几里得算法):HDU 5114 Collision
    二叉树面试题
    linux eval命令
    关于Shell中命令替换$(...)与后置引用`...`的不同
    linux set,env和export
    linux crontab 命令
    排序
  • 原文地址:https://www.cnblogs.com/EricZLin/p/8605611.html
Copyright © 2020-2023  润新知