• HTML标签---表格


     目  录 

    1.表格的结构

    2.表格标签 

    3.table标签的标签属性

    4.表格的合并属性


    1.表格的结构

    在默认情况下,表格是没有边框的,如果想要出现边框,就是用border属性。

    1. <table border="1">
    2.             <tr>
    3.                 <th>姓名th>
    4.                 <th>性别th>
    5.             tr>
    6.             <tr>
    7.                 <td>张三td>
    8.                 <td>td>
    9.             tr>
    10.             <tr>
    11.                 <td>李四td>
    12.                 <td>td>
    13.             tr>
    14.             <tr>
    15.                 <td>王五td>
    16.                 <td>td>
    17.             tr>
    18.         table>

    2.表格标签 

    标签名描述
    table.../table是用来在html页面上创建表格的
    th.../th代表列名一般放在第一行
    tr.../tr用来定义表格的一行
    td.../td用来定义表格的一列

    caption.../caption

    定义表格标题

    3.table标签的标签属性

    属性属性值描述
    border数字只要不是0,边框就会显示出来,数字越大,最外圈边框会越粗
    alignleft,center,right规定表格相对周围元素的对齐方式
    bgcolor

    颜色名或十六进制颜色表

    规定表格的背景颜色

    cellpadding

    数字或百分数(例:1,10%)

    规定单元边沿与其内容之间的空白
    cellspacing

    数字或百分数(例:1,10%)

    规定单元格之间的空白
    width

    数字或百分数(例:1,10%)

    规定表格的宽度。
    1. <table border="1" bgcolor="pink" cellspacing="0" width="300">
    2. <tr >
    3. <th>姓名th>
    4. <th>性别th>
    5. tr>
    6. <tr align="center">
    7. <td>张三td>
    8. <td>td>
    9. tr>
    10. <tr align="center">
    11. <td>李四td>
    12. <td>td>
    13. tr>
    14. <tr align="center">
    15. <td>王五td>
    16. <td>td>
    17. tr>
    18. table>

    补充:caption标签的属性只有align。th标签有属性align,bgcolor,height,width等等。

    4.表格的合并属性

    以下属性适用于th,tr,td标签,来实现上下纵向合并单元格或者左右横向合并单元格。需要注意的是,当实现了上下合并或左右合并,就应该减掉相应行中的列。

    属性属性名描述
    colspan数字左右合并,属性值为多少就合并多少个单元格
    rowspan数字上下合并,属性值为多少就合并多少个单元格
    1. <table border="3" width="500" height="200">
    2. <tr align="center" >
    3. <td colspan="2">abtd>
    4. <td>ctd>
    5. <td>dtd>
    6. tr>
    7. <tr align="center" >
    8. <td rowspan="2">eitd>
    9. <td>ftd>
    10. <td>gtd>
    11. <td>htd>
    12. tr>
    13. <tr align="center">
    14. <td>jtd>
    15. <td>ktd>
    16. <td>ltd>
    17. tr>
    18. table>


    (小编也在努力学习更多哟!以后再慢慢分享的啦!)

    希望对友友们有所帮助!!!!

  • 相关阅读:
    十五、垃圾回收相关算法
    Vuex详解:Vue.js的状态管理方案
    主机基本安全加固
    Webview+Viewpager左右滑动冲突
    Word处理控件Aspose.Words功能演示:使用 Java 将文本转换为 PDF
    【算法刷题日记之本手篇】完全数计算与扑克牌大小
    Redisson—分布式对象
    SpringMVC学习篇(五)
    System.IO.FileSystemWatcher的坑
    Day38
  • 原文地址:https://blog.csdn.net/naoguoteng/article/details/127127420