How can I modify the font style of an HTML table?

After reviewing the HTML table below.

Follow this jsfiddle link:

<table id="tabla" align="center" cellspacing="15" cellpadding="0">
    <tr>
        <td><input type="button" value="Form View"></input></td>
        <td><input type="button" value="Table view"></input></td>
    </tr>
    <tr>
        <td><strong>Classification1:</strong></td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td><strong>Classification1:</strong></td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td><strong>Classification1:</strong></td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
    <tr>
        <td><strong>Classification1:</strong></td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
        <td>Sic1:</td>
        <td>Value</td>
        <td>Sic Description1:</td>
        <td>value</td>
        <td>Source:</td>
        <td>value</td>
    </tr>
</table>

In the above table, each row consists of multiple tds. The objective is to style the label names as bold without affecting the values.

Example: 

<td><strong>Classification1:</strong></td>
 <td>value</td>

In this case, Classification1: should be displayed in bold and value should remain normal.

javascriptjqueryhtmlcss

Answer №1

A quick CSS fix: 

#table tr td:nth-child(2n-1) {
   font-weight: bold;
}

Answer №2

Using a table for this task is not the most suitable option!

There are two main reasons for this:

  • Accessibility - individuals with visual impairments using screen readers will have an easier experience navigating your website.
  • Search engines will find it simpler to understand and index the content on your site.

Instead, consider utilizing data definition lists:

 <dl>
      <dt>Classification1:</dt>
      <dd>value</dd>

      <dt>Source:</dt>
      <dd>value</dd>

      <dt>Sic1:</dt>
      <dd>Value</dd>

      <dt>Sic Description1:</dt>
      <dd>value</dd>

      <dt>Source:</dt>
      <dd>value</dd>
</dl>

CSS: 

dt, dd {margin-right:10px;margin-left:10px;}
dt {font-weight:bold;}

dl>dd, dl>dt {float:left}
dl:after {clear:both;float:none;display:block;content:'';}

You can see this in action in the following fiddle: http://jsfiddle.net/netinept/GsG7C/9/

Answer №3

td:nth-child(odd) {
  font-weight:bold;
}

check out this Webpage

Answer №4

Insert the tag before naming the table 

      <td><b>category</b></td>

Answer №5

Implementing CSS3 `:nth-child(odd)` and `:nth-child(even)` with a jQuery fallback is a great way to style elements.

CSS3 Example:

tr td:nth-child(odd) {
   font-weight:bold;
}

Note: The `nth-child` selector does not have support in Internet Explorer.

jQuery Example:

$(document).ready(function()
{
  $("tr td:odd").css("font-weight", "bold");
});

JSFiddle Demo

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

Convert JavaScript crypto code for HMAC SHA256 hashing to PHP

I am looking to convert the following JavaScript code: crypto.createHmac('sha256', secret) .update(s) .digest('base64'); into PHP. Can anyone guide me on how to achieve this? The solutions I have tried so far are as follows: has ...

javascriptphphash

Once the form has been submitted, proceed to open a new page following processing

Trying to remove an entry or offer from the database and then return to the page with all entries/offers. Attempted using Javascript, but it successfully deletes the item without redirecting to the overview page. Is this the correct approach with Javascri ...

javascriptphphtml

Steps for transforming text into a clickable button hyperlink

I extracted data from a table using the Google API and successfully displayed all the information. Now, I'm looking to target specific columns containing text that are actually URLs and convert them into clickable buttons. Although I was able to styl ...

javascripthtml

Using window.print as a direct jQuery callback is considered an illegal invocation

Curious about the behavior when using Chrome $(selector).click(window.print) results in an 'illegal invocation' error $(selector).click(function() { window.print(); }), on the other hand, works without any issues To see a demo, visit http://js ...

javascriptjquery

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

htmlcss

monitoring the winstonjs logs and inserting additional parameters

Can an argument be injected into a log, like error, debug, or info, using the configuration of winston (createLogger)? I want to intercept the log and include an object in each log entry. ...

javascriptexpresswinston

How can I display a Skeleton when pressing pagination buttons and then turn it off after 3 seconds?

Here is a snippet of my code featuring the use of a Skeleton as a placeholder for CardMedia: {loading ? ( <Skeleton variant="rectangular" width={308} height={420} animation="wave" /> ) : ( <CardMedia s ...

javascriptreactjsreact-hooksnext.jsmaterial-ui

There seems to be an issue with the Redux connect() higher order component not functioning properly when passing an action creator and

Encountering an issue with the Action creator in react-redux when using the mapDispatchToProps function to return an object to pass into the connect HOC. The strange thing is that it works fine when passing the Action creator directly into the connect HOC, ...

javascripthtmlreactjsredux

What are some ways to personalize web notifications?

I am looking for a way to easily send web notifications with custom input and control when they are sent, such as after submitting a form. I want to create a user-friendly interface for non-coders to use. Currently, I am attempting to set up a system wher ...

javascripthtmlweb-notifications

Generating HTML files using Express and body-parser

I need assistance with incorporating user login data into an existing HTML document using Express. The input from the username field should be displayed at the top of the page. How can I access specific elements in the HTML document through Node or Express ...

javascripthtml

Getting the Value of an Object in an Array in My Angular Project

Within my Angular Application, I am receiving an array of objects from an API: "register":[ { "club": 8, "players": 100, "officials": 10 }, { "male": 7, "female": 2, "other": 1 }, { "Brazil": 5, "France": 1, "Italy": 2, "England": 2 } ] I want to specifi ...

javascriptarraysangulartypescript

"Encountering a NodeJS Error when trying to Connect to MongoDB

Currently, I am experimenting with a basic Hello World App using MongoDB, Express, Swig, and NodeJS Utilizing the latest version of Node.js along with other dependencies. Operating on Chrome 46.0 (64 bit) with Mac OS X 10.9.5 This is the code from my ap ...

javascriptnode.jsmongodbexpressswig

Conceal or eliminate redundant choices in dropdown menu

I am currently working with the WebForms framework and I have encountered an issue with my dropdownlist control in one of my Forms. The Select option is sometimes being added twice, causing duplication in my form. I am looking for a way to either remove th ...

c#htmlcssasp.net

jQuery's Ajax response doesn't work properly in Firefox version 3.5.7

I have a straightforward Ajax script that runs smoothly in Chrome, Internet Explorer 8, and Firefox 3.5.5 but encounters issues with Firefox 3.5.7. The code is detailed below: Here's the HTML Page: <div> <form> <input id='b ...

jquery

How can I incorporate a second main app.js file in Node.js to improve the organization and cleanliness of my codebase?

Hello, I am currently using Node.js and the Express framework for my project. All of my server-side code is contained within my app.js file, which has become quite complex with almost 250 lines of code. Now, I need to add authentication functionality to my ...

javascriptnode.jsexpressauthentication

Developing a hover-triggered tooltip feature in a React application

A tooltip has been created that appears when hovering over an element, displaying the full name of the product called productName. <div className="product-select-info" onMouseEnter={e => productNameHandleHover(e)} onMouseLeave={productNameHand ...

javascriptreactjstypescript

Turning my dual button navigation into tabs to display distinct HTML pages beneath a designated header

body{ background:url(background.jpg); background-size: cover; } h1{ font-family: 'Dancing Script', cursive; font-size: 5em; color: white; text-align: center; margin-top: 25px; margin-bottom: 20px; } h2{ font-size: 18px; color: white; text-align ...

javascripthtmlcss

React - Inserting a break in the line;

Can someone help me with my code that is supposed to add a line break every 60 characters? I'm confused about why the \n character isn't working. function countStr (str1){ let str2=""; let charCount=0; for(let i=0; i< ...

javascriptreactjs

Challenges encountered when attempting to access files from the filesystem on vercel

Currently, I am working on a website that includes a "blog" section with markdown files. The setup reads the files seamlessly from the file system without any errors... except when deployed on Vercel. In that case, it throws a "No such file or directory" e ...

javascriptreactjsnext.jsjsxvercel

Error in the jqplot Line Graph

I'm having trouble displaying a chart on my webpage. The console shows that the chart is being drawn, but it's not showing up on the page. I've checked that the container is added correctly, but I can't figure out where the issue lies. ...

jqueryjquery-mobilejqplot