html中table标签及属性

table表格

  • HTML表格由table标签以及多个tr、th和td标签组成
  • table表示表格,整个表格要包含在
    标签中
  • tr表示表格中的行,是单元格的容器,一行可以包括多个单元格
  • th表示表格中的单元格,我理解为列,th放在tr内表示这一行为标题行,其中的字体会默认粗体居中显示
  • td表示表格中的单元格,我理解为列,td也要放在tr内,可以理解为内容行
  • tfoot表示表格最后一行
  • 必须在一个
    里面,它不能单独使用,相当于
  • 标示一个表格,标示这个表格中间的一个行,中间。
    简单练习:
    效果图:
    html中table标签及属性_第1张图片
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
      <table border="1" style="border-collapse: collapse;text-align: center;">
        <tr>
          <th>姓名</th>
          <th>学号</th>
          <th>性别</th>
        </tr>
        <tr>
          <td>lily</td>
          <td>418</td>
          <td></td>
        </tr>
        <tr>
          <td>rose</td>
          <td>36</td>
          <td></td>
        </tr>
        <tfoot>
          <td>tom</td>
          <td>479</td>
          <td></td>
        </tfoot>
      </table>
    </body>
    </html>
    

    table标签属性

    下列标签属性一般不建议使用,而是通过样式属性来实现

    • 1.border标签属性:设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框;

    • 实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现。
      html中table标签及属性_第2张图片

    • 2.width标签属性:设定表格的宽度,该标签属性属性值如下:
      在这里插入图片描述
      不建议通过width标签属性直接设置表格宽度,建议向table标签添加width样式属性进行设置。

    • 3.align标签属性:指定表格相对于周围标签的对齐方式
      不建议通过align标签属性设置表格相对于周围标签的对齐方式,建议向table标签添加样式属性进行设置:

    • 4.cellspacing 标签属性:设定单元格之间的间距(单位:px)。

    不建议通过cellspacing标签属性设置单元格之间的间距,建议向table标签添加border-spacing样式属性进行设置

    • 5.cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)

    不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距,建议向td或th标签添加padding样式属性来实现

    • 6.不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果
    • 7.border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框,属性值如下:

    在这里插入图片描述

    table标签练习

    html中table标签及属性_第3张图片

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <table border="1" cellpadding="5" style="border-collapse: collapse;text-align: center;">
        <tbody>
          <tr id="HeadTD">
            <td class="sort">姓名</td>
            <td class="sort">学号</td>
            <td class="sort">语文</td>
            <td class="sort">数学</td>
            <td class="sort">英语</td>
            <td class="sort">总分</td>
            <td class="sort">平均分</td>
          </tr>
        </tbody>
        <tbody id="ContTD">
          <tr>
            <td>张三</td>
            <td>220305</td>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td>22</td>
            <td>44</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>220302</td>
            <td>33</td>
            <td>44</td>
            <td>66</td>
            <td>99</td>
            <td>33</td>
          </tr>
          <tr>
            <td>黄五</td>
            <td>220307</td>
            <td>22</td>
            <td>55</td>
            <td>22</td>
            <td>55</td>
            <td>66</td>
          </tr>
          <tr>
            <td>赵六</td>
            <td>220303</td>
            <td>44</td>
            <td>22</td>
            <td>33</td>
            <td>66</td>
            <td>88</td>
          </tr>
        </tbody>
      </table>
    </body>
    <script>
      window.onload = function () {
        var HeadTD = document.getElementById("HeadTD");
        var ContTD = document.getElementById("ContTD");
        var HeadList = HeadTD.getElementsByTagName("td");
        var ContTrList = ContTD.getElementsByTagName("tr");
        var sortArray = new Array();
        var newNode;
        for (var i = 0; i < HeadList.length; i++) {
          HeadList[i].index = i;
          HeadList[i].onclick = function () {
            console.log(this);
            if (this.className) {
              newNode = "";
              for (var j = 0; j < ContTrList.length; j++) {
                sortArray[j] = new Array();
                sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
                sortArray[j][1] = j;
              }
    
              if (!isNaN(sortArray[0][0])) {
                sortArray.sort(sortNumber);
              } else {
                sortArray.sort();
              }
    
              for (var x = 0; x < ContTrList.length; x++) {
                newNode += "
    " + ContTrList[sortArray[x][1]].innerHTML + ""; } ContTD.innerHTML = newNode; } } } } function sortNumber(b, a) { if (a > b) { return 1 } else if (a < b) { return -1 } else { return 0 } } </script> </html>

    你可能感兴趣的:(日常)

    标示行中的一个列,需要嵌套在