Which is the preferred method for formatting a chatroom: using Divs or using tables (tr, td

In my chatroom, users type messages into a textarea, which are then sent to a PHP file. The PHP file wraps the message in HTML and writes it to a file called log.html, along with the user's username and profile picture.

Previously, my code looked like this:

<div class='msgln'>

    <ul>
        <li class='float'><img src='$someimg'></li>
        <li class='username_chatroom'><b>username</b></li>
        <li class='text_chatroom'><span class='text_span'>Random text</span><li>

    </ul>

</div>

Would it be better to convert the divs to table td and tr for easier formatting?

<tr class='tr_chat'>
        <td class='img_chat'><img src='$someimg'></td>
        <td class='usr_chat'><b>username</b></td>
        <td class='msg_chat'>Text text text</td>    
</tr>

When generating the file containing this HTML, should I explicitly close the table or leave it open?

<table>
      <tr class='tr_chat'>
      <td class='img_chat'><img src='$someimg'></td>
      <td class='usr_chat'><b>username</b></td>
      <td class='msg_chat'>Text text text</td>  
      </tr>

So, should I stick with tables for formatting and should I explicitly define the end of a table?

Answer №1

Would it be more practical to convert the divs into table td, tr for better formatting?

No, but it would be logical to convert them into a table because the data follows a tabular format.

Each row consists of related items (a specific message and its metadata).

Each column contains similar data (with appropriate headings).

This is the purpose of tables in HTML.

My only other question is, when creating the file for this HTML, do I need to specify the end of the table as well?

Yes, the closing tag for the table element is required.

Because if I define it at the beginning of the file, how do I end it properly?

Your issue may be trying to use HTML as a database. Consider using an actual database and generating the HTML content from it when needed.

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

Blazor combines the power of both C# and JavaScript by allowing them to be executed in a single

There is a button that triggers a JavaScript function: <button class="btn-orange btn" onclick="expand(this.closest('.profile'))">JavaScript</button> And there is another button that executes C# code and toggles ic ...

Steps for inserting a button within a table

Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...

creating an identical copy of a dynamic element's size

I am currently working on a project using react js where I need to incorporate multiple images. My goal is to have standard background divs / rectangles that match the exact size of each image, allowing for animations to be performed on top of them. The sn ...

How to set the element in the render method in Backbone?

Currently, I am in the process of developing a web page utilizing BackboneJS. The structure of the HTML page consists of two divs acting as columns where each item is supposed to be displayed in either the first or second column. However, I am facing an is ...

Having trouble with playing the appended HTML5 Video?

Having trouble getting a video player to display after clicking a button. This is the code I use to add the video player in index.html: $("#videoContainer").append( "<video id=\"video-player\" width=\"100%\" height ...

additional dark border streak

When you resize the browser window, you will notice a different layout for iPhone. I am seeing an additional black line below the slider and I'm unsure how to remove it. I have already tried removing the border property but the black line remains. Bel ...

What could be causing the issue where only the latest data is being shown

When I use ajax to retrieve data from my database, the console.log displays all the results correctly, but in my HTML, only the last result is shown. What could be causing this issue? Any help would be appreciated! Thanks! Please keep your response simple ...

Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom ...

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

Ensuring a fixed table with vertical scrolling only, no horizontal scrolling, while scrolling in either direction

I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() ...

Can this PHP code be optimized for better efficiency?

Seeking to create dynamic links on a page where the link for the current page is excluded. The code functions as desired but seems repetitive - hoping for a more efficient solution, given limited programming experience. <div class= "links"> <?php ...

The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

I am currently incorporating Bootstrap into my HTML, however, the <a> tag is behaving like a block display despite the fact that I have specified the CSS to be display:inline; <!doctype html> <html> <head> <link rel="styleshee ...

Displaying PDF files on the internet without allowing them to be downloaded

How can I display PDF files on my website without allowing them to be saved or downloaded? Is there a way to prevent browsers from saving or downloading the PDF files? ...

CSS properties are ineffective in scaling the image strip

I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time. However, I'm encountering a problem when specifying the height and widt ...

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

Exploring the IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to compile a list of all styles in the current document is quite simple. Does anyone have any suggestions on how to generate a list of only th ...

What is the best way to make a CSS element move with Javascript?

Currently working on a JavaScript game where I am in need of a CSS object to replace the original JavaScript object. Specifically, I want my "sword" CSS object to move along with my player object when it is Unsheathead. All the examples I find only show wh ...

PHP form headaches: issues with submitting and posting

I'm having trouble with the submit button in my PHP code. Here's what I have so far (it's for a website where users can rate things): <form method="POST> <input type="radio" name="person" value="1" /> <input type="radio" name ...

Utilizing a media query to execute a <script> exclusively on desktop devices

I am attempting to only run <script type="text/javascript" src="#" data-cfasync="false" async="async"></script> on desktop devices. I experimented with <style> @media screen and (max-width: 600px) { ...

CSS dimensional changes

I am currently working on developing an application that involves incorporating a perspective map with the ability to add map markers represented by absolutely positioned DIVs. However, I seem to be encountering challenges related to transformations and 3D ...

Could you show me how the easyrtcid is generated in the demonstration of audio-only chat? I would appreciate a step-by

Currently, I am utilizing the easyrtc webpage to test out the audio only chat demo and everything seems to be running smoothly. However, when connecting, the easyrtcid variable is automatically assigned a random string. I was wondering if there is a way t ...