HTMLの色の長方形をより良く見えるようにするにはどうすればよいですか？

Question

私はテーブルに色の付いた矩形を表示しようとしていて、それを見栄えの良いものにしようとしていますが、HTML/CSSではひどいです。

<table> 
 
    <tr> 
 
    <td> 
 
     #2E21FF&nbsp;&nbsp;<span style="background-color: #2E21FF;border-width=1px;border-style:solid;border-color:rgb(204,204,204);padding:0;margin:0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 
    </td> 
 
    </tr> 
 
</table>

このminicolorのデモは、入力での素敵な見本を持っているが、私も来るように見えることはできません。

これ

は私が持っているもの（そしてそれはゴミのように見えます）

http://labs.abeautifulsite.net/jquery-minicolors/

フィドル：それに近い https://jsfiddle.net/Kieveli/9hjm9Lkf/

Answer 1

tdがクラスcolor-boxとは異なるスタイル設定され、すべての色は、その後、個別にあなたのコードと簡単な実装の再利用性を与え、授業で扱われることに注意してください。

.color-box span { 
 
    border: 1px solid rgb(204, 204, 204); 
 
    padding: 2px; 
 
    padding-left: 25px; 
 
    margin: 0px; 
 
    margin-right: 10px; 
 
    border-radius: 3px; 
 
} 
 
.color-box { 
 
    border: 1px #aaa solid; 
 
    padding: 6px; 
 
    padding-right: 100px; 
 
    border-radius: 3px; 
 
    -moz-box-shadow: inset 0 0 2px 0 #888; 
 
    -webkit-box-shadow: inset 0 0 2px 0 #888; 
 
    box-shadow: inset 0 0 1px 0 #888; 
 
} 
 
.blue-box { 
 
    background-color: #0088cc; 
 
} 
 
.red-box { 
 
    background-color: #ff6161; 
 
} 
 
.green-box { 
 
    background-color: #70c24a; 
 
} 
 
.yellow-box { 
 
    background-color: #e0e03e; 
 
}

<table> 
 
    <tr> 
 
    <td class="color-box"> 
 
     <span class="blue-box"></span> #0088cc 
 
    </td> 
 
    <td class="color-box"> 
 
     <span class="yellow-box"></span> #e0e03e 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="color-box"> 
 
     <span class="green-box"></span> #70c24a 
 
    </td> 
 
    <td class="color-box"> 
 
     <span class="red-box"></span> #ff6161 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

これで初めてのことですか？

https://jsfiddle.net/9hjm9Lkf/1/

td { 
    border: 1px solid #ccc; 
    background-color: #efefef; 
    padding: 5px 6px 5px 10px; 
    border-radius: 5px; 
    font-family: calibri; 
    color: #777; 
} 

td span { 
    background-color: #716bc7; 
    border-left=1px solid #ccc; 
    width: 20px; 
    height: 100%; 
    display: inline-block; 
    border-radius: 5px; 
} 

Answer 3

このページでは多くの例を見つけることができます：css tricksここ

、四角や三角で例：

.square { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: #0074d9; 
 
    border-radius: 80px; 
 
    margin-bottom: 30px; 
 
    float: left; 
 
    margin-right: 20px; 
 
    border-radius: 5px; 
 
} 
 

 
.triangle { 
 
    margin-left: 4.5cm; 
 
    height: 0px; 
 
    width: 0px; 
 
    border-left: 100px solid #0074d9; 
 
    border-right: 100px solid transparent; 
 
    border-bottom: 100px solid transparent; 
 
    border-top: 100px solid transparent; 
 
}

<h2>Just some shapes : </h2> 
 
<div class="square"></div> 
 
<div class="triangle"></div>

Answer 4

以下は、テーブルに色付きの矩形を作成する方法の例です。

td { 
       border:solid thick darkblue; border-radius: 1em; 
       border-width:3px; padding-left:9px; padding-top:6px; 
       padding-bottom:6px; margin:2px; width:980px; 
    } 


    <table> 
     <tr> 
     <td 

    <span "background":#ff0000;  
      width:200px; 
      height:100px; 
      display: inline-block></span>; 
    </td> 
     </tr>