How can I apply styles to table cells based on their data type using HTML and CSS?

On a webpage, I have a standard table/th/tr/td setup that presents tabular information. The columns can be rearranged:

product|price|date
price|product|date
date|product|price

... and so forth.

However, the original order remains consistent for each display:

Microsoft|100|01-01-2020
Google|200|02-02-2019

or

100|Microsoft|01-01-2020
200|Google|02-02-2019

I need to format the product/price/date columns in the table (e.g., making "product" bold and "date" italic). Unfortunately, it doesn't look very appealing:

<td style="font-weight: bold">Microsoft</td> ...

Is there a way to achieve this using CSS without directly applying styles/classes to every individual cell when rendering the table/th/tr/td elements?

Thanks in advance!

htmlcss

Answer №2

Utilize JavaScript to determine when to apply styles to specific data cells.

For example:

You may create a predefined set of CSS classes in an array and inject them as needed. This approach is beneficial for handling dynamic data within tables.

Answer №3

To give each cell a specific style, you can assign different classes based on the content within them. For instance, you could use "n" for name cells and "d" for date cells. Then, using CSS, you can easily apply styles to these classes. If you want to make all names bold, you can achieve that by adding the following code:

.n{
    font-weight: bold;
}

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

Bootstrap 5 does not support tab navigation functionality

I created a new HTML page, and I encountered an issue while trying to enable tabs using JavaScript. <html> <head> <title>Excel Viewer</title> <link hr ...

javascripthtmlbootstrap-5

HTML Browser Notice

My panel is designed to display different elements based on the browser being used. Specifically, I want different content to appear for IE, Firefox, and all other browsers. I don't want to create unique code for every browser, but rather streamline i ...

html

The jQuery plugin embedded in the Joomla 3.2 module fails to load or function properly

Seeking help with a JavaScript issue on my Joomla website. I'm not an expert, so please bear with me. I am using a regular plugin (not a Joomla specific one) to display my portfolio. It should work like this: ... black.html This is how it shouldn&a ...

javascriptphpjqueryhtmljoomla

Unexpected border-bottom styling issue observed on adjacent div elements

This is my unique code: <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <div style="border-bottom:1px solid black"> <div style="width=50%;float:left">A new paragraph with u ...

htmlcss

Implementing CSS styling within a JavaScript file

I have a vague memory of an easy way to incorporate CSS code within a JS file, but I can't recall the specific details. Simply inserting CSS code into a JS file doesn't seem to work, so there may be a need for comments or some other method. *No ...

javascripthtmlcss

Tips for positioning a solitary md-tab component to the right

Can a single md-tab element be aligned to the right of md-tabs while keeping the rest of the tabs in their original position? ------------------------------------------------------------------------- | Tab 1 | Tab 2 | Tab 3 | ...

cssangularjstabsangular-material

Switch to display only when selected

When I click on the details link, it will show all information. However, what I actually want is for it to toggle only the specific detail that I clicked on. Check out this example fiddle Here is the JavaScript code: $('.listt ul').hide(); $( ...

javascriptjqueryhtml

Tips for displaying a horizontal scrollbar on a div within a div that has a hidden scrollbar

To ensure that a horizontal scrollbar is displayed on my "content" div when the screen size is smaller than the specified minimum width, I have set the overflow-x property of the parent "container" to hidden. This prevents the scroll from appearing across ...

htmlcssbootstrap-4

Using Jquery to hide or show objects within a <div> when clicked

My goal is to create a webpage that displays three different contents based on which button is clicked. Below is the code for reference: I want the page to show three specific sections: A search bar only when the 'search' button is clicked, T ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

I have been experimenting with Bootstrap's Example accordion code, which can be accessed via this link: http://jsfiddle.net/qba2xgh6/18/ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

javascriptjqueryhtmlajaxobject

New to the world of web design and seeking answers as to why my style is not being applied

After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...

htmlcss

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

Currently, I am in the process of creating a blog from scratch as a way to enhance my skills. The posts' content is stored as a long string in MongoDB with some random HTML tags added for testing purposes. I am curious about the conventional method fo ...

javascripthtmljsonreactjsmongodb

Tips for transforming a container div into a content slider

Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

htmlcsshtml-tableborder

Tracking User Visits in Codeigniter

Below is the code breakdown: (Step by step) Place counter.txt in APPPATH . 'logs/counter.txt' Set up counter_helper.php in APPPATH . 'helpers/counter_helper.php'; Autoload the newly created helper in APPPATH . 'config/autoload.p ...

phphtmlcodeigniterwebhitcounter

An unusual type of data is being stored in a MySQL database through Navicat Premium while using Django

Recently, I've encountered an issue while trying to insert data from an HTML form into my database. Strangely, upon submission, the values for "gender" and "website rating" get replaced with "on" instead of the actual input provided through the websit ...

pythonhtmlmysqldjango

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

javascriptjqueryhtmlcsspopupwindow

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

javascripthtmljquery

Use jQuery to switch back and forth between two different sets of classes

I am attempting to switch between two different sets of classes using jQuery. My goal is to change from one custom icon to a font-awesome icon upon clicking an element. While I have been successful in changing a single class, I am facing challenges when tr ...

javascriptjqueryhtml