Insert circular shapes of varying colors within the cells of a table

Question

Insert circular shapes of varying colors within the cells of a table

Is there a way to insert colored circles inside the table data cells?

I attempted with CSS but struggled with positioning.

.circle{
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block; }

Do I have to create individual classes for each color? Having separate classes for different colors can lead to lengthy CSS code.

What is the best method to achieve this?

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}

th {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    border-bottom: 2px solid #000;
    padding: 10px 8px;
}

td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 6px 8px;
    text-align: center;
}

<table>
    <thead>
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Data</td>
          <td>Black</td>
       </tr>
       <tr>
          <td>PEWA</td>
          <td>Yellow</td>
       </tr>
       <tr>
          <td>Data</td>
          <td>Blue</td>
       </tr>
       <tr>
          <td>AFW</td>
          <td>Orange</td>
       </tr>
       <tr>
          <td>YSW</td>
          <td>Red</td>
       </tr>
       <tr>
          <td>GWG</td>
          <td>Green</td>
       </tr>
       <tr>
          <td>BFD</td>
          <td>Blue</td>
       </tr>
       <tr>
          <td>VHY</td>
          <td>Violet</td>
       </tr>
       <tr>
          <td>GWY</td>
          <td>Grey</td>
       </tr>
       <tr>
          <td>WDA</td>
          <td>Yellow</td>
       </tr>
    </tbody>
 </table>

html css

Answer 1

Answer №1

Looking for a solution like this?

Check out this link

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}

th {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    border-bottom: 2px solid #000;
    padding: 10px 8px;
}

td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 6px 8px;
    text-align: center;
}
.circle {
   height: 25px;
   width: 25px;
   border-radius: 50%;
   display: inline-block;
}

.td-content {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
 }

 .black {
      background-color: #000;
      margin-left: 2px;
 }

Answer 2

Looking for a solution like this?

Check out this link

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}

th {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    border-bottom: 2px solid #000;
    padding: 10px 8px;
}

td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 6px 8px;
    text-align: center;
}
.circle {
   height: 25px;
   width: 25px;
   border-radius: 50%;
   display: inline-block;
}

.td-content {
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
 }

 .black {
      background-color: #000;
      margin-left: 2px;
 }

Answer 3

Answer №2

To add colors to the text, you can use span elements for each color and wrap them inside a div. Then, style them using display: flex for alignment and inline styles for the color:

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  font-size: 13px;
}

th {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  border-bottom: 2px solid #000;
  padding: 10px 8px;
}

td {
  border-bottom: 1px solid #ccc;
  color: #000;
  padding: 6px 8px;
  text-align: center;
}

.color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 55px;
  max-width: fit-content;
  margin: auto;
}

span {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>
        <div class="color">
          Black <span style="background-color: black;"></span>
        </div>
      </td>
    </tr>
    ... (additional rows with different colors)
  </tbody>
</table>

If you prefer a cleaner HTML structure, consider using a Sass for loop for setting colors dynamically:

$colors: #000000, #ffff00, #0000ff, #f5a002, #ff0000, #008000, #0202f9, #ee82ee,
    #808080, #fcfc06;

@each $color in $colors {
    $i: index($colors, $color);

    tr:nth-of-type(#{$i}) span {
        background-color: $color;
    }
}

Answer 4

To add colors to the text, you can use span elements for each color and wrap them inside a div. Then, style them using display: flex for alignment and inline styles for the color:

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  font-size: 13px;
}

th {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  border-bottom: 2px solid #000;
  padding: 10px 8px;
}

td {
  border-bottom: 1px solid #ccc;
  color: #000;
  padding: 6px 8px;
  text-align: center;
}

.color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 55px;
  max-width: fit-content;
  margin: auto;
}

span {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
}

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>
        <div class="color">
          Black <span style="background-color: black;"></span>
        </div>
      </td>
    </tr>
    ... (additional rows with different colors)
  </tbody>
</table>

If you prefer a cleaner HTML structure, consider using a Sass for loop for setting colors dynamically:

$colors: #000000, #ffff00, #0000ff, #f5a002, #ff0000, #008000, #0202f9, #ee82ee,
    #808080, #fcfc06;

@each $color in $colors {
    $i: index($colors, $color);

    tr:nth-of-type(#{$i}) span {
        background-color: $color;
    }
}

Answer 5

Answer №3

If you're looking to streamline your code, there are two approaches you can consider:

Directly set the background-color attribute in HTML, which may result in longer HTML but avoids interfering with the CSS file.
Set the background-color attribute using a specific class (e.g., .bg-green for setting the color to green) in the CSS file for flexible application across various elements in the HTML.

Another tip is to use the tag with either block or inline-block positioning to easily control text alignment. For example, changing

<td>Black<span></span></td>

to

<td><span>Black</span><span></span></td>

, and then applying vertical-align: middle to both span elements for vertical centering.

For a detailed demonstration, refer to the snippet below where the first two rows of the table utilize the first method while the remaining rows employ the second method:

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}

th {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    border-bottom: 2px solid #000;
    padding: 10px 8px;
}

td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 6px 8px;
    text-align: center;
}

/* custom */
.custom_table span{
    display: inline-block;
    vertical-align: middle; /* this attribute will middle align all the "span" tag at same level */
}
.custom_table .circle {
    margin-left: 5px; /* spacing the circle and the text */
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
}
.bg-blue {
    background-color: blue;
}

.bg-orrange {
    background-color: orange;
}

<table class="custom_table">
    <thead>
       <tr>
          <th>Head 1</th>
          <th>Head 2</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Data</td>
          <td><span>Black</span><span class="circle" style="background:black;"></span></td>
       </tr>
       <tr>
          <td>PEWA</td>
          <td><span>Yellow</span><span class="circle" style="background:yellow;"></span></td>
       </tr>
       <tr>
          <td>Data</td>
          <td><span>Blue</span><span class="circle bg-blue"></span></td>
       </tr>
       <tr>
          <td>AFW</td>
          <td><span>Orange</span><span class="circle bg-orange"></span></td>
       </tr>
    </tbody>
 </table>

Hope this explanation proves helpful!

Answer 6

If you're looking to streamline your code, there are two approaches you can consider:

Directly set the background-color attribute in HTML, which may result in longer HTML but avoids interfering with the CSS file.
Set the background-color attribute using a specific class (e.g., .bg-green for setting the color to green) in the CSS file for flexible application across various elements in the HTML.

Another tip is to use the tag with either block or inline-block positioning to easily control text alignment. For example, changing

<td>Black<span></span></td>

to

<td><span>Black</span><span></span></td>

, and then applying vertical-align: middle to both span elements for vertical centering.

For a detailed demonstration, refer to the snippet below where the first two rows of the table utilize the first method while the remaining rows employ the second method:

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}

th {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    border-bottom: 2px solid #000;
    padding: 10px 8px;
}

td {
    border-bottom: 1px solid #ccc;
    color: #000;
    padding: 6px 8px;
    text-align: center;
}

/* custom */
.custom_table span{
    display: inline-block;
    vertical-align: middle; /* this attribute will middle align all the "span" tag at same level */
}
.custom_table .circle {
    margin-left: 5px; /* spacing the circle and the text */
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
}
.bg-blue {
    background-color: blue;
}

.bg-orrange {
    background-color: orange;
}

<table class="custom_table">
    <thead>
       <tr>
          <th>Head 1</th>
          <th>Head 2</th>
       </tr>
    </thead>
    <tbody>
       <tr>
          <td>Data</td>
          <td><span>Black</span><span class="circle" style="background:black;"></span></td>
       </tr>
       <tr>
          <td>PEWA</td>
          <td><span>Yellow</span><span class="circle" style="background:yellow;"></span></td>
       </tr>
       <tr>
          <td>Data</td>
          <td><span>Blue</span><span class="circle bg-blue"></span></td>
       </tr>
       <tr>
          <td>AFW</td>
          <td><span>Orange</span><span class="circle bg-orange"></span></td>
       </tr>
    </tbody>
 </table>

Hope this explanation proves helpful!

Insert circular shapes of varying colors within the cells of a table

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to get rid of a tooltip from a disabled button

In WordPress, you can add a logo with accompanying text positioned at the bottom of the page

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Steps for rendering Emoji in React Application

Create a design where two columns can be scrolled independently and extend to fit the height of the viewport

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Can the text within an li element be accessed using Xpath even with varying attributes?

Incorporating YouTube videos into Internet Explorer

Using JQuery and Bootstrap, add or remove rows dynamically

Edit script: Iterate through the different div elements at regular intervals AND pick a specific div by pressing a button

Steps for adding a div after a specified number

Can an identification be included in a label element?

Using AJAX to dynamically update a div's class following a POST request

I'm having issues getting my fancybox to display properly

Is it possible to invoke a JavaScript function from within a CSS file?

Develop a form containing a date input in a special character-free format, along with a validation feature

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

I need to access a webpage using VBA without relying on Internet Explorer for logging in

Discovering components with identical html attributes in Selenium