What is the best solution for setting up a div containing a table with images inside?

Question

What is the best solution for setting up a div containing a table with images inside?

I'm looking to achieve the following:

<div id="display">
  <div id="slideshow1">
     <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle">
       <img ... />
     </td></tr></table>  
  </div> 
</div>

Currently, my implementation involves:

var thelistt = localStorage.getItem('thelist')
   var trt = document.createElement("div");
    trt.setAttribute("Id","slideshow1");
    trt.className="pics";  

    $('#display').append(trt);  

var tble = document.createElement("table");
    tble.setAttribute("cellspacing","0");
    tble.innerHTML = "<tr><td style='height:200px;padding:0;vertical-align:middle'>";
    $('#slideshow1').append(tble);
    trt.innerHTML += thelistt;

This results in creating a div, then a table, followed by images before closing the div.

Does anyone know of a more efficient way to accomplish this without the current cumbersome steps? Here's a link to my current code for reference:

(Make sure to click on edit and input two or more image URLs directly)

jquery html css dynamic

Answer 1

Answer №1

Here is an example of how to create a specific HTML structure using jQuery:

var $display = jQuery('<div>').attr('id', 'display');
var $slideshow1 = jQuery('<div>').attr('id','slideshow1');
var $td = jQuery('<td>').attr('style','height:200px;padding:0;vertical-align:middle');

var $tr = jQuery('<tr>');
var $table = jQuery('<table>').attr('cellspacing', '0').append($tr.append($td));

jQuery('body').append($display.append($slideshow1.append($table)));

The above code will generate the following HTML structure:

<div id="display">
  <div id="slideshow1">
    <table cellspacing="0">
      <tbody>
        <tr>
          <td style="height: 200px; padding: 0pt; vertical-align: middle;">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

You can apply a similar pattern to add an image or other elements to the structure.

While there are more efficient ways to structure this code, I prioritized clarity for demonstration purposes :)

I hope this helps!

Answer 2

Here is an example of how to create a specific HTML structure using jQuery:

var $display = jQuery('<div>').attr('id', 'display');
var $slideshow1 = jQuery('<div>').attr('id','slideshow1');
var $td = jQuery('<td>').attr('style','height:200px;padding:0;vertical-align:middle');

var $tr = jQuery('<tr>');
var $table = jQuery('<table>').attr('cellspacing', '0').append($tr.append($td));

jQuery('body').append($display.append($slideshow1.append($table)));

The above code will generate the following HTML structure:

<div id="display">
  <div id="slideshow1">
    <table cellspacing="0">
      <tbody>
        <tr>
          <td style="height: 200px; padding: 0pt; vertical-align: middle;">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

You can apply a similar pattern to add an image or other elements to the structure.

While there are more efficient ways to structure this code, I prioritized clarity for demonstration purposes :)

I hope this helps!

What is the best solution for setting up a div containing a table with images inside?

Answer №1

Similar questions

What is the best way to switch between search results shown in an li using AngularJS?

Tips for creating a static PHP website with a fixed navigation bar and footer

Preventing scrolling in jQuery UI Draggable when using flexbox

Insert a division into the table following every row

The loaded iframe did not deliver any valid message

What's the best way to display two checkboxes on a single line?

Creating a custom vehicle with interactive controls, including buttons to accelerate and steer using HTML, JavaScript, and jQuery

Is there a way I can appropriately display an image in a specific size box?

Having issues with json_decode not functioning correctly after using JSON stringify

Unable to find the specified element within the dropdown menu

CSS: Placing a Column below a Float Positioned Column

a solution to the focus/blur issue in Firefox's browser bug

The jqGrid is not showing the AJAX JSON data as expected

Block Button styles not displaying in IE when set to Full Width

Exploring the Functionality of HTML Anchor Link Fragment within Angular 6

Applying ngClass to handle positive and negative numbers and adjust color in Ionic/Capacitor

Make the text stand out by highlighting it within a div using a striking blue

Error: when trying to refresh TABLE DATA, an issue occurred with a stale element reference where the element is not connected to the

Display the selected checkbox in the table

Experiencing issues with ngx-masonry functionality in Angular application, resulting in images appearing clustered and overlapping