HTML 自学笔记（HTML表格相关标记）

HTML表格相关标记

  1. 表格的基本属性及结构
  • 基本属性：
      1. <table>
      2. <caption>
      3. <tr>
      4. <td>和<th>属性
      5. <thead>定义表格的页眉
      6. <tfoot>定义表格的页脚

table基本格式：<table>属性1="属性值1" 属性2="属性值2" 属性3="属性值3">表格内容</table>

 

    1. table属性
      1. width  表格的宽度，值包括：px、相对于父元素的%
      2. height  表格的高度，值包括：px、相对于父元素的%
      3. border 表格外边框的宽度，值包括：px
      4. align  定义表格的位置，left居左  right居右  center居中。默认值left
      5. cellspacing 单元格之间的距离，默认是2px，单位px
      6. cellpadding 单元格内容与单元格边框的显示距离。单位px
      7. fram   控制表格边框最外层的四条线框
        1. void（默认） 无边框
        2. above       仅顶部边框
        3. below       仅底部边框
        4. hsides      仅顶部和底部有边框
        5. ihs           仅左侧边框
        6. ris            仅右侧边框
        7. vsides       左右侧边框
        8. box          全部4个边框
        9. border      包含全部4个边框
    2. rules 控制是否显示以及如何显示单元格之间的分割线
        1. none（默认）  表示无分割线
        2. all                 表示包括所有分割线
        3. rows            表示仅有行分割线
        4. clos             表示仅有列分割线
        5. groups         表示仅在行组和列组之间有分割线
    3. <tr>标记定义表格的一行，对于每一个表格行，都由一对<tr>...</tr>标记表示每一行，<tr>标记内可以嵌套多个<td>或者<th>标记

tr属性：

    • bgcolor设置背景颜色    格式bgcolor="颜色值"
    • align    设置垂直方向对齐方式  align="top/center/bottom"

4.<td>和<th>都是单元格的标记。<td>必须嵌套在<tr>内，成对出现

区别：1.<th>是表示头标记，通常位于首行或者首列。<th>中的文字默认会被加粗，而<td>不会。

  2.<td>是数据标记，表示单元格的具体数据

共点：两者的标签属性都是一样的。

属性：

        • bgcolor单元格的背景颜色
        • <rowspan>一列跨多行 
        • <colspan>一行跨多列
        • <valign>垂直对齐方式
        • <align>单元格对齐方式
        • <height>/<width>单元的高度/宽度
          复制代码
          <html>
<head>
    <title>表格的制作演练</title>
    <meta charset="utf-8">
</head>
<body>
<table frame="border" cellpadding="15" cellspacing="0" align="center" rules="all" width="960" height="500">
    <tr align="center" bgcolor="#ccc">
        <th>班级</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王三霞</td>
        <td>11</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王二霞</td>
        <td>11</td>
        <td>85</td>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王霞</td>
        <td>11</td>
        <td>90</td>
    </tr>
    <tr align="center">
        <td>四年级一班</td>
        <td>王四霞</td>
        <td>11</td>
        <td bgcolor="red">60</td>
    </tr>
</table>
</body>
</html>
          复制代码

           这是制作效果，大家可以检测一下。

 

posted @   血手牵驴  阅读(4344)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示