Customizing the appearance of two separate tables

I have a pair of tables that I want to style differently. Table 1 needs the images centered with no border, while table 2 should have text left-aligned with a border.

Here is the CSS:

table, th, td {
    border: 1px solid #999;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}

And here is the HTML for both tables:

//Table 1
<table border="0" style="width:100%">
  <tr>
    <td><img src="img1.png"></td>
    <td><img src="img2.png"></td>
  </tr>
</table>

//Table 2
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

Answer №1

click here for live demo

Modify the CSS to add a custom style to table1


table, th, td {
    border: 1px solid #999;
    border-collapse: collapse;
}
th, td {
    padding: 10px;
}

.table1 td{
    text-align: center;
}

.table1, .table1 td, .table1 tr{
    border: 0px;
}

Answer №2

Add a specific class to each table and then target the tables using those unique classes

Here is an example in HTML:

//table 2
<table class="first-table" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
</table>

//table 1
<table class="second-table" border="0" style="width:100%">
  <tr>
    <td><img src="img1.png"></td>
    <td><img src="img2.png"></td>
  </tr>
</table>

In CSS, you can then apply styles to these tables based on their respective classes like this:

.first-table {
  // styles for the first table go here
}

.second-table {
  // styles for the second table go here
}

I hope this explanation helps clarify things for you.

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

Using Ajax to dynamically load page content into a div based on a selection made in a

How can I dynamically load content into a div using Ajax based on the selection made in a dropdown menu? For example, I have a select box with two options: test.HTML and test1.HTML. Below that, there is a div where I want to display the content from eithe ...

Manipulating values in JavaScript using an onclick event in PHP

I am looking to remove the "http" from the URL part of an input link before sending the data. This is my input code that looks like this when clicked: <input style="outline: none;" type="button" onclick="formatText ('link:url');" class="btn ...

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

Is it possible to incorporate a LINK within the CSS GRID layout?

Hey everyone, I've encountered an issue with my link placement in the grid. I'm looking to turn the entire box into a clickable link. * { padding: 0; margin: 0; } body { font-family: Hiragino Kaku Gothic Pro W3, Arial; } .title-conta ...

How can one gain access to a specifically generated element?

In my task of dynamically generating multiple elements, I am facing an issue related to accessing specific ones. To illustrate this problem as simply as possible, I have provided the following code: $(document).ready(function() { var num1 = 0; v ...

What is the best way to implement lazy loading of images that have not been downloaded in a JavaFX WebView?

Currently, I am in the process of developing an email client application using JavaFX WebView to showcase email HTML files. In order to enhance its responsiveness and speed, my goal is to display inline images in emails as they are downloaded locally. Duri ...

issue with varying levels of user authentication

I encountered an issue with the multi-level user login functionality in my PHP MySQL project. While I am able to login as an admin without any problems, nothing happens when attempting to log in with a different user. Is there something crucial that I migh ...

I want to have a video playing in the background of my home page, but when viewers access it on their mobile devices, I would like to display a specific image instead

Is there a specific attribute I can include to make the image display instead of the video on mobile or small devices? ...

access denied on image links

While developing a web app with Angular5, I encountered an issue regarding retrieving image URLs from the 4chan API. Each post in my database contains an image URL, however, when I try to access it through my app, I receive a 403 forbidden error in the con ...

Stunning CSS Image Showcase

When hovering over my image gallery, it works fine. However, I would like the first image in the gallery to automatically appear in the enlarged section instead of displaying as a blank box until hovered over. <!DOCTYPE html> <html lang="en"> ...

Initiate a page break at the beginning of the table in case there are not enough lines on the first page

Does anyone know how to ensure that a table starts on a new page when printing, rather than continuing at the bottom of the previous page? I have tables with repeating headers and many rows, and sometimes a new table will start at the very end of a page. ...

AngularJS integration with Bootstrap Confirmation jQuery plugin

I am currently struggling to implement the Bootstrap-Confirmation plugin with AngularJS. Despite following instructions from this YouTube tutorial, I cannot seem to get the directive to function correctly. A related query on Stack Overflow references a di ...

Validating multiple fields that are added dynamically using jQuery

I am facing an issue with form validation using jQuery. The problem is that when one field is valid, the form gets submitted automatically. Here is a link to my code: http://jsfiddle.net/cvL0ymu7/. How can I ensure that all fields are validated before subm ...

Unable to retrieve the following element in a JavaScript array

I am a beginner in JavaScript and I am attempting to access the next element of an array using an onclick function but so far I have not been successful. var i, len; function quiz() { var quiz_questions = [ "who is the founder of Fa ...

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

While working on a project, I incorporated the FlexStart Bootstrap Template. However, I encountered an issue with the Dropdown feature on the navbar. When hovering over the menu and submenu, they flicker incessantly. Despite investing a considerable amount ...

Expanding borders occur when the element is repositioned using the translate property

I am trying to create a vertical line that remains in the center of a div container regardless of the screen size. I want this line to be 1px thick. However, when I use transform: translate(-50%, -50%);, the border seems to become thicker than expected. Be ...

Issue with the alignment of form input fields and buttons in Mozilla Firefox

Fixing Form Field Alignment Issue in Firefox After encountering and solving a form field alignment issue myself, I realized that the problem persisted in Firefox while displaying correctly in Chrome. Here's how I resolved it, although I am open to mo ...

What is the correct way to write the syntax for wp_register_style function in

I'm attempting to include a cache-buster version in my CSS file. The guides mention: <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> However, I've scoured Google and Stack Overflow for the correct formatting of these var ...

Leveraging the power of HTML5's details element for optimized printing

The <details> HTML5 element is used to provide a simple show/hide functionality. While this feature works well on-screen, it poses an issue when printing as any closed <details> elements disappear in the printed version. I attempted to fix th ...