How can I make an HTML colour rectangle look better? [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to show a coloured rectangle in a table and make it look nice, but I'm terrible at HTML / CSS.
This is what I have (and it looks like garbage):
<table>
<tr>
<td>
#2E21FF <span style="background-color: #2E21FF;border-width=1px;border-style:solid;border-color:rgb(204,204,204);padding:0;margin:0;"> </span>
</td>
</tr>
</table>
This minicolor demo has a nice swatch in the input, but I can't seem to even come close to it:
http://labs.abeautifulsite.net/jquery-minicolors/
Fiddle:
https://jsfiddle.net/Kieveli/9hjm9Lkf/

Answer 1

Note that the td is styled differently with a class color-box and all the colors are then separately handled with their classes, giving you re-usability of code and simple implementation.
.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

Does this give you a start?
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

you can find many examples in this page : css tricks
Here, an example with a square and a triangle :
.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

Below is an example how to create a coloured rectangle in a table.
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>