tips:tr没有border
边框折叠：border-collapse:collapse;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* tips:tr没有border */
  10.         table td{
  11.             border:1px solid #333;
  12.         }
  13.         table{
  14.             /* 边框折叠*/
  15.             border-collapse:collapse;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <table>
  22.         <!-- table row -->
  23.         <tr>
  24.             <!-- table data -->
  25.             <td>商城</td><td>手机</td>
  26.         </tr>
  27.         <tr>
  28.             <td>Tmall</td><td>mate40</td>
  29.         </tr>
  30.         <tr>
  31.             <td>JD</td><td>小米</td>
  32.         </tr>
  33.     </table>
  34. </body>
  36. </html>

表格间距

.gap {
height: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border:1px solid #333;
        }
        .gap {
            height: 30px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr class="gap"></tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr class="gap"></tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</body>
</html>

表格行宽

column
商城

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border:1px solid #333;
        }
        table{
            border-collapse:collapse;
            width: 700px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <!-- column -->
            <td colspan="3">商城</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</body>
</html>

1.PNG跨行表格

rowspan
<”3”>商城

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border:1px solid #333;
            width: 300px;
            height: 100px;
        }
        table{
            border-collapse:collapse;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <!-- rowspan -->
            <td rowspan="3">商城</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</body>
</html>

1.PNG