HTML-表单table

table

HMTL有专门负责表格的元素,table。创建一个表格要使用四个元素:

,,
  • 表头不仅仅可以放在表格上侧,也可以置于表格左侧,决定于
  • ,

    格式如下:

    <table>
        <caption>The tablecaption> /*表单标题,默认显示上方*/
        <tr> /*行*/
            <th>Cityth> /*表头*/
            <th>Dateth>
            <th>Temperatureth>
        tr>
        <tr>
            <td>Wallatd> /*表格数据*/
            <td>June 15thtd>
            <td>75td>
        tr>
        <tr>
            <td>Magictd>
            <td>June 26thtd>
            <td>50td>
        tr>
    table>

    表格如下:

    The table
    City Date Temperature
    Walla June 15th 75
    Magic June 26th 50

    注意:

    • 对于没有内容的表格数据,不能省略,应写成
    位置。
  • 表格可以进行嵌套。
  • 常用格式:

    table {
        caption-side: bottom; /*标题显示位置*/
        border-spacing: 20px 40px; /*表格数据间距,行间距,列间距*/
        /*border-collapse: collapse; /*两个相邻表格的边框重合*/*/
    }
    
    caption {
        font-family: sans-serif;
        padding-top: 8px;
    }
    
    th {
        text-align: center;
    }

    注意:

    • border-spacing: 0px; border-collapse: collapse区别
      前者设置边距为0,但是相邻两个单元格的边框都在,只是没有间距。
      后者设置为边框重叠,相邻两个单元格的边框只显示一个边框的宽度。

    • 间隔设置行背景色方法
      添加新的分类,为需要行加入分类。
      使用伪类,选择奇数偶数子元素。tr:nth-child(odd)或者tr:nth-child(2n+1)

    • 单元格跨行
      使用rowspan和colspan属性可以进行跨行和跨列。
      按照表格顺序,将需要td指定跨行属性,对于下一行被占用td进行删除。
      格式:

    <table>
        <caption>The tablecaption> /*表单标题,默认显示上方*/
        <tr> /*行*/
            <th>Cityth> /*表头*/
            <th>Dateth>
            <th>Temperatureth>
        tr>
        <tr>
            <td>Wallatd> /*表格数据*/
            <td>June 15thtd>
            <td rowspan="2" >75td>
        tr>
        <tr>
            <td>Magictd>
            <td>June 26thtd>
        tr>
        <tr>
            <td>Bountifultd>
            <td>June 28thtd>
            <td>80td>
        tr>
    table>
    The table
    City Date Temperature
    Walla June 15th 75
    Magic June 26th
    Bountiful June 28th 80

    你可能感兴趣的:(html)