Incorporating background icons or images into an HTML table cell

I want to create a golf leaderboard design similar to the one on golfchannel.com, with circles representing birdies and squares for bogeys.

https://i.sstatic.net/mDD8o.png

This project utilizes Bootstrap for styling and PHP for database management and logic.

Currently, I am working within the loop that displays the table content (mainly <td> elements), and I have attempted the following code snippet:

switch ($tmp['holeNettPoints'][$i]) {
  case 3:
    $img = 'background="assets/img/oval.png"';
    break;
                                                                                        
  default:
    $img = "";
    break;
}                                                                              }
echo "<td ".$img.">".$tmp['holeNettPoints'][$i]."</td>";

However, the result is a repetition of the circular image (oval.png) in each cell it is applied to, rather than centered singularly behind the number:

https://i.sstatic.net/dg1Wn.png

Do you think my approach is incorrect? Are there alternative methods or HTML/CSS properties that could help achieve the desired layout?

htmlcsshtml-table

Answer №1

Thanks to the advice of @julien.giband and some trial and error, I was able to find a layout that suited my needs perfectly. The CSS snippet that finally worked for me is as follows:

th, td {
    padding: 4px;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    align-items: center;
}

While there are many alignment options and properties available in both HTML and CSS specifications, this particular combination did the trick for me...

https://i.sstatic.net/S8IE0.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting content alignment for mobile devices and centering on desktop screens

I am currently working on creating a responsive website and I have a specific layout in mind. I want to center some text and an image both vertically and horizontally within a div that has a minimum height, leaving plenty of blank space above and below the ...

htmlcsstwitter-bootstrapbootstrap-5

Adjusting Bootstrap 4 Modal Transparency

Currently using Bootstrap 4 Beta and looking to darken the background when a Modal is displayed. I stumbled upon a solution suggesting the addition of a CSS class. .modal-backdrop.in { opacity: 0.5 !important; position: fixed; } The advice was no ...

htmlcssbootstrap-modalbootstrap-4

By simply clicking a button, you can input a value into a field without the need for the page to refresh

Can someone please help me figure out how to insert a specific value into an input field without refreshing the page? I have tried the following code but it doesn't seem to work. Basically, when I click the button, I want the value "1234567" to be aut ...

javascriptjqueryhtml

What could be causing flickering when animating CSS translate on a black background in WebKit?

Upon viewing the jsfiddle, it's evident that this animation experiences flickering in webkit browsers. Regardless of whether the animation is set to repeat infinitely or not, the issue persists. How can this problem be resolved? I've spent hours ...

cssgoogle-chromecss-animationscss-transforms

CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together: HTML <div id="sample"></div> CSS #sample { width:400px; height:400px; background-color:green; display:none; } #sample:hover{ background-color:red; } It's a hidden DIV tha ...

javascriptcsshoverstyles

Bootstrap triggering unexpected behavior in navbar styles

As I delve into the world of HTML, CSS, and JS, I encountered a peculiar error while using Bootstrap that seems to be affecting the links in my navigation bar. Here's the CSS I've been using: https://pastebin.com/naVZuzaG And here's the co ...

htmlcssbootstrap-4

What is the best way to incorporate multiple countdown timers on a single HTML page?

I am in the process of developing an online auction site and I need to include the end time and date for each auction. To achieve this, I have created a countdown.js file with the following code: // set the date we're counting down to var target_dat ...

javascripthtmlcountdowntimer

Looking to reload a div with a captcha in a contact form without the need to refresh the entire page

I have integrated a div tag into my contact form to contain the captcha elements. If the user is unable to read the captcha image, I want to provide them with an option to refresh that specific section without reloading the entire page. I have tried variou ...

javascriptjqueryhtml

Preventing users from entering negative values in an input type=number by implementing Angular FormControl Validators

Is there a way to prevent users from decrementing the value of an input field with type=number to a negative value? I am aware that we can use min=0 in the HTML input element, but I'm looking for another method using Angular FormControl Validators. S ...

htmlangulartypescriptvalidationangular-forms

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

cssreactjscss-tables

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

javascriptjqueryhtmlcssdatatables

Tips on incorporating AJAX sorted outcome into HTML divs

Hey there, I have successfully implemented AJAX, PHP and MySQL Sorting to display results in tables, as shown in the code below. Now, my query is: How do I display the $result in HTML divs instead? Your assistance is highly appreciated. Here is the PHP c ...

phpjavascriptmysqlhtmlajax

Adding a dynamic index from ngFor to an HTML attribute value can be accomplished by incorporating the current

I am using ngFor and I am trying to make an attribute inside the loop change its value by adding the ngFor index. This means that each div created within ngFor will have a unique attribute value. Source: <div class="class1" *ngFor="let item of items; l ...

htmlangular

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

csshtmlimagehtml5-video

Hovering over an element will change its background color along with adjusting the background

I encountered a situation with the following code: CSS: <style> div.testy { border:1px solid black; } div.testy:hover { background-color:red; } </style> HTML: <div class="testy" style="height:100px; back ...

htmlcsshoverbackground-color

Having difficulty recreating the arrow feature in the bootstrap sidebar

I am currently working on creating the fourth sidebar (from the left) using the templates provided in Bootstrap 5 examples. Everything seems to be falling into place except for one issue - I can't seem to get the arrow to rotate when aria-expanded=tr ...

htmlcssbootstrap-5

What is the best way to effectively apply a mask within a PixiJS container so that its color does not display upon page refresh?

After implementing the code snippet below to add a mask in a container, I encountered an issue where upon clicking the refresh button on the page (chrome), the pixi stage would turn completely white until the refreshing process is completed. Can anyone p ...

javascripthtmlgoogle-chromepixi.js

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...

htmlcss

What is the reason for needing to multiply all the numbers by ten in order to solve this floating point addition problem?

When dealing with floating point arithmetic in Javascript, it's common to see results like 0.2 + 0.1 = 0.30000000000000004, which can be confusing. However, a simple workaround is to multiply the numbers by 10, perform the operation, and then divide b ...

javascripthtmlfloating-pointprecisiontofixed

Positioning Tumblr blockquotes beneath each other, rather than within

Just diving into the world of HTML/CSS and I've been working hard on creating my own Tumblr theme (almost finished!). One issue I'm having is styling the replies, which are in blockquote form. I want them to display one after another in a line li ...

htmlcsstumblr