How to make a line stand out in an HTML table using <td> tag: **Bold a

I have written the code below to create a table, and I only want the text XYZ to be bold and all other text to remain unbold within the < td > tag. However, when I implemented this code, the entire < td > content became bold. I would prefer not to use a CSS style sheet for this file. Can someone please advise me on how to achieve this?

<table width=100%>
<tr>
<td><center><b>XYZ<b><br>Aabc<br>+91-xxxxxxxxx<br><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98e0e1e2d8f0ecf2f3f4b6fbf7f5">[email protected]</a><center></td>
</tr>
</table>

I appreciate any help in advance.

htmlcss

Answer №1

<table style='width:100%;'>
    <tr>
        <td style='text-align:center;'>
            <span style='font-weight:bold;'>ABC</span><br>
            XYZ<br>
            +91-1234567890<br>
            <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3456789012345678901234">[email protected]</a></td>
    </tr>
 </table>

http://jsfiddle.net/abc123/

Answer №2

  1. It is recommended to utilize a style sheet for better organization and consistency.
  2. A minor error was detected: The / symbol is missing in the second instance of <b>.

Answer №3

Make sure to close all your tags properly

<table width=100%>
<tr height=11%>
<td><center><b>XYZ</b><br>Aabc<br>+91-xxxxxxxxx<br><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93ebeae9d3fbe7f9f8ffbdf0fcfe">[email protected]</a></center></td>
</tr>
</table>

Answer №4

The HTML tag has a spelling mistake, make sure to close the b tag with a forward slash like this:

<table width=100%>
  <tr>
    <td><center><b>XYZ</b><br>Aabc<br>+91-xxxxxxxxx<br><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f58d8c8fb59d819f9e99db"">[email protected]</a><center></td>
  </tr>
</table>

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

Tips for making a 2D grid on a webpage

Is there a way to implement a 10x10 grid on a webpage where users can click anywhere on the grid and have their (x, y) position recorded with one decimal place accuracy, covering values between 0.0-10.0 or 0.1-9.9? Appreciate any guidance! ...

javascripthtml

Deactivate radio buttons when the table value is greater than or equal to one

On my webpage, there are radio buttons for 'Yes' and 'No'. When 'Yes' is selected, a hidden <div> appears where users can fill in fields. Upon clicking the 'Add' button, the information is displayed in a table. ...

javascriptjqueryhtml

The onClick event in HostListener is intermittent in its functionality

While attempting to create a dropdown box in Angular by following these examples, I am encountering inconsistent results. Below is the code I have used: HTML <button (click)="eqLocationDrop()" id="eqLocButton"><i class="fas fa-caret-down">< ...

htmlangulartypescript

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

I'm trying to incorporate a loading spinner or any other HTML element while an image is being loaded. Currently, I am utilizing the ImageComponent to showcase images in a random movie generator. Although I managed to make the spinner work for the init ...

htmlreactjsnext.js

Utilizing CSS flexbox to occupy the remaining vertical space

I'm facing a scenario where I have three elements: div with content 1, div with content 2, and an image that spans 100% width (with variable height). My goal is to align div 1 at the top, the image at the bottom, and fill the remaining space with cont ...

htmlcssflexbox

Submitting form by clicking a link on the page

To submit a POST request with "amount=1" without displaying it in the URL, I need the site to send this request when any link on the site is clicked. This JavaScript code achieves that with a GET request: window.onload = function () { document.body.oncli ...

javascripthtmlpostget

Why are the random colors blending into the image?

After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's ...

javascriptcssimagebackground-color

Text centered over an animated underline using CSS

Seeking help with my bootstrap 4 nav menu. I have implemented a CSS animation that creates an outward underline effect for the nav-link items. However, I am struggling to center the text above the line. Any suggestions on how to achieve this? I attempted ...

csstwitter-bootstrapbootstrap-4

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

After coming across a handy template online, I decided to implement a modal pop-up feature when hovering over cards using Bootstrap 5. Here's what I have so far: class SavedEpisodes extends Component { $(function() { $('[data-toggle=&qu ...

javascripthtmlcssreactjsbootstrap-5

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...

jqueryhtmlcssradio-button

Transition smoothly between sections using fullPage.js with clipping path effects

I am looking to create a unique clipping animation utilizing SVG clipping path. The animation should hide the first section while revealing the second section in a smooth transition using fullPage.js. This idea is somewhat similar to the question discusse ...

javascripthtmlcsssvgfullpage.js

Concerns with combining key value pairs in Typescript Enums

Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...

htmlangulartypescript

The bottom border of the check boxes is not displaying in Internet Explorer

https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...

htmlcss

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

javascriptphpandroidcssipad

What is the best way to deactivate select option(s) based on the JSON data retrieved through AJAX?

I am facing an issue with a dropdown menu that contains several options. My goal is to loop through these options and set the disabled attribute on specific ones based on the result of an Ajax call. https://i.sstatic.net/9k3f9.png This is what I am tryin ...

javascriptjqueryhtmlajaxjson

Drop-down and autocomplete feature in Material UI design framework

Encountering an issue with aligning a label with a dropdown in material UI, and for some reason, this behavior is observed: https://i.sstatic.net/n7pj8.png Struggling to get them aligned on the same row. This is the code snippet of my component: const us ...

cssreactjsmaterial-ui

The "ID" value for the row that was chosen is unable to be parsed with AJAX JQUERY

After populating an HTML table with data retrieved from a database using PHP, I encountered an issue while trying to fetch the correct ID using AJAX. Following a recommendation to use classes to build my jQuery code, I find myself stuck and unsure of what ...

javascriptphpjqueryhtmlajax