CSS表格.边框 の 初体验

<style>
  div.alldirection{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;   
   border-bottom-style:solid;
   border-bottom-color:green;
   border-bottom-width: 50px;
   border-right-style:solid;
   border-right-color:yellow;
   border-right-width: 50px;      
   background-color:black;   
  }
</style>
 
<div class="alldirection">
<font color="white">四边都有边框　</font>
</div>

<style>
  td.head{
      border-bottom-color: skyblue;   
      border-bottom-width: 5px;
      border-bottom-style: solid;
  }
  td{
    width: 25%;
    text-align: center;
  }
</style>
<table width="100%">
  <tr>
    <td class="head">商品</td>
    <td class="head">数量</td>
    <td class="head">价格</td>
    <td class="head">说明</td>
  </tr>
</table>

 

<style>
    table{
        width: 100%;
        border-collapse:collapse;
    }
    tr{
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(182, 180, 180);
    }
    td{
        width: 25%;
        text-align: center;
    }
    
    .c1{
        background: rgb(216, 218, 217);

    }
</style>
<table width="100%">
    <tr>
      <td>id</td>
      <td>名称</td>
      <td>血量</td>
      <td>伤害</td>
    </tr>
    <tr class="c1">
        <td>1</td>
        <td>扁鹊</td>
        <td>300</td>
        <td>66</td>
    </tr>
    <tr>
        <td>2</td>
        <td>甄姬</td>
        <td>2700</td>
        <td>60</td>
    </tr>
    <tr class="c1">
        <td>3</td>
        <td>李白</td>
        <td>280</td>
        <td>76</td>
    </tr>
    <tr>
        <td>4</td>
        <td>亚瑟</td>
        <td>500</td>
        <td>56</td>
    </tr>
  </table>