HTML基础（2）

表格

<table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

属性:

  • border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度
  • width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度
  • height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度
  • cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙
  • cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距
  • align: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
    • 给table设置align属性, 是让表格在浏览器中居左/居右/居中
    • 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
    • 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
    • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
    • 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
  • valign: 规定表格相对周围元素的对齐方式, 它的取值有 top/middle/bottom
    • 给table设置valign属性, 无效
    • 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
    • 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
    • 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
  • bgcolor:规定表格的背景颜色
    • 给table设置bgcolor属性, 是给整个表格设置背景颜色
    • 给tr设置bgcolor属性, 是给当前行设置背景颜色
    • 给td设置bgcolor属性, 是给当前单元格设置背景颜色
    • 该属性仅仅作为了解, 企业开发中用css代替, 因为HTML仅仅用于说明语义
<table border="1" align="center" width="400px" height="400px" cellspacing="0" cellpadding="5px">
        <caption><h4>人才统计</h4></caption>
        <tr align="center">
            <th>姓名</th>
            <th>年龄</th>
            <th>婚否</th>
            <th>XXXX</th>
        </tr>
        <tr align="center">
            <th>张三</th>
            <td>23</td>
            <td>未婚</td>
            <td>xxoo</td>
        </tr>
        <tr valign="top">
            <th>李四</th>
            <td>24</td>
            <td>已婚</td>
            <td>ooxx</td>
        </tr>
        <tr valign="bottom">
            <th>小明</th>
            <td>21</td>
            <td>离婚</td>
            <td>xoxo</td>
        </tr>
    </table>
QQ截图20170809221801.png

其它标签

  • 表单中有两种类型的单元格, 一种是标准单元格td, 一种是表头单元格th
  • th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中
  • caption标签:给整个表格设置标题,一定要嵌套在table标签内部才有效
<table border="1" align="center" cellspacing="0" width="800px">
        <caption><h3>今日小说排行榜</h3></caption>
        <tr bgcolor="grey">
            <th>排名</th>      <!--  th标签自动居中+加粗 -->
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
        <tr align="center" valign="middle" height='100px'>
            <td>1</td>
            <td>暴走大事件</td>
            <td></td>
            <td>623557</td>
            <td>4088311</td>
            <td><a href="">贴吧</a><a href="">图片</a><a href="">百科</a></td>
        </tr>
     </table>
QQ截图20170809222636.png

表格合并

    <table border="1" width="200px" height="200px" align="center" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
QQ截图20170809223604.png

表格的结构

  • thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
  • tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
  • tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现
  • 表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容
  • 由于有一部分浏览器对talbe的这种结构支持不是很好, 所以在企业开发中一般都不用严格的按照这种结构来编写
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML需要掌握标签
    HTML需要掌握标签 标签（空格分隔）： H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 6,172评论 1赞 8
  • ## HTML基础-列表标签/表格标签
    ## HTML基础-列表标签/表格标签 # 列表标签(无序列表/有序列表/定义列表) # 表格标签 # 单元格合并...
    KsKison阅读 4,019评论 0赞 0
  • HTML标签
    列表标签 无序列表 格式： 需要显示条目内容 作用：给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先...
    MGd阅读 2,890评论 0赞 0
  • html基础2
    line-height 行高是指文本行基线间的垂直距离关于行高 行距 基线等概念的图例： 在div中使文字垂直居中...
    饥人谷_Diego阅读 3,682评论 0赞 0
  • 你的问题主要在于羡慕太多，努力太少
    一 阿紫最近苦不堪言。她的发小兼邻居程怡从澳洲回家休假，让阿紫深深地感到了一种人生与人生之间的落差。程怡是那种典型...
    娄不晚阅读 3,838评论 0赞 0