html表格知识总结

小云云
发布: 2017-11-17 14:29:28
原创
2045 人浏览过

要踏入程序员的大门,我们必会经过的路就是html,掌握基础的html才能更好的学习接下来的技术,那么今天我们就来全方面的分享一下html表格相关的知识。

1、

标记

  a,基本格式

表格内容

  b,table 标记的属性

    width属性:表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分之百(%)

    height属性:表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分比(%)

    border属性:表示表格外边框的宽度

    align属性:表格的显示位置,值left居左显示   center居中显示  right居右显示  默认left

    cellspacing属性:单元格时间的间距,默认2px ,单位像素

    cellpadding属性:单元格内容与单元格边框的显示距离,单位像素

    frame属性:控制表格边框的显示距离

      void(默认值) 表示无边框

      above 表示仅顶部有边框

      below 表示仅有底部边框

      hsides 表示仅有顶部边框和底部有边框

      lhs 表示仅有左侧边框

      rhs表示仅有右侧边框

      vsides表示仅有左右侧边框

      box 包含全部4个边框

      border包含全部4个边框

   rules属性:控制是否显示以及如何显示单元格之间的分割线

      none(默认值)表示无分割线

      all 表示包括所有分隔线

      rows表示仅有行分割线

      clos表示仅有列分割线

      groups表示仅在行组合列组之间有分割线

  c,制作一个简单的网页布局

2,标记

  a,什么时候使用?在什么时候使用如果表格需要使用标题,那么就可以使用标记

  b,如何使用?属性的插入位置,直接位于

属性之后就,表格行之前 

  c,align属性 

    top:标题放在表格的上部

    botton:标题放在表格的下部

    left:标题放在表格的左边

    right:标题放在表格的右边

3,

标记

  a,定义表格的一行,对于每一个表格行,都是由一对

...标记表示,每一行标记哪可以嵌套多个标签内,是成对出现

  b,

或者标记

  b,可选属性

    设置水平对齐方式 格式:align=“颜色值”

    botton:靠顶端对齐

    top:靠底部对齐

    middle:居中对齐

4,

  a,

都是单元格的标记,其必须嵌套在
是表头标记,通常位于首行或者首列,中的文字默认会被加粗,而不会

  c,

是数据标记,表示该单元格的具体数据

  d,两者的标记属性都是一样的

  e,属性

    bgcolor:设置单元格背景

    align:设置单元格背景

    valign:设置单元格垂直对齐方式

    width:设置单元格宽度

    height:设置单元格高度

    rowspan:设置单元格所占行数

    clospan:设置单元格所占列数

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="960" height="250" border="1" cellpadding="10" frame="box" >
        <caption>表格的标题</caption>
    <tr bgcolor="#ccc">
        <th bgcolor="red">班级</th>
        <th>姓名</th>
        <th>年级</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>四年级一班</td>
        <td>张三</td>
        <td>16</td>
        <td>80</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>李四</td>
        <td>16</td>
        <td>70</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>王五</td>
        <td>16</td>
        <td>60</td>
    </tr>
    </table>
</body>
</html>
登录后复制

以上就是最基础的html表格的一些相关内容,根据上面的教程来完成一个表格,我相信你会有很大的收获。

相关推荐:

全方位介绍HTML表格属性

重新发现HTML表格

关于HTML表格的详细介绍

HTML表格布局实际使用

HTML表格布局实例讲解

以上是html表格知识总结的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板