What is the best way to display elements in separate rows within an HTML table?

Hi, I'm currently retrieving data from an Excel file but it is all showing up in one row. Below is the HTML code snippet:


{% block body %}

# Using Bootstrap table class
    <table class="table table-bordered">
        <thead>
            <tr>
              <th scope="col">Pensioner name</th>
              <th scope="col">cnic</th>
              <th scope="col">mobile</th>
              <th scope="col">wallet</th>


            </tr>
          </thead>

            <tr>
                {% if 'm1' %}
                <td><h6 >{{ m1 }}</h6></td>
                {% endif %}

                {% if 'm2' %}
                <td><h6 >{{ m2 }}</h6></td>
                {% endif %}
                {% if 'm3' %}
                <td><h6 >{{ m3 }}</h6></td>
                {% endif %}
                {% if 'm4' %}
                <td><h6 >{{ m4 }}</h6></td>
                {% endif %}
          </tr>
    </table>
{% endblock %}

This is my current output: view image here

I need to display each piece of data in separate rows for better readability. Any suggestions on how to achieve this?

Answer №1

Adding a new row involves inserting a <tr> element for each row.

Check out this functional example:

table,
tr,
th,
td {
  border: solid 1px;
}
<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td>
    </tr>
    <tr>
      <td>The</td>
      <td>Tick</td>
      <td>Crimefighter Sorta</td>
    </tr>
  </tbody>
</table>

Each <tr> within the <tbody> signifies a new row being created.

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

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

Getting rid of the hover box feature in a WordPress theme

Having some difficulty removing the hover effect on the WordPress theme I'm using, called Enigma. The hover effect creates a whitebox over the link, and despite trying various methods to remove it, the issue persists. You can view the website at the ...

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

How can you style a radio button in CSS while displaying a label next to it?

Trying to customize a radio button and align its label next to it using CSS has proven to be more challenging than expected. The current setup is not producing the desired outcome as the radio button appears distorted and the label is not perfectly inline ...

Issue with Webpack: file-loader failing to load SVG files dynamically in HTML

Configuration in package.json: { "name": "webpackTutorial", ... "devDependencies": { "bootstrap": "^4.3.1", ... "webpack-merge": "^4.2.2" } } Webpack Configuration in webpack.common.js: var HtmlWebpackPlugin = ...

How to integrate Phpfox::getBlock into a template file within PHPFOX

Today, I attempted to integrate Phpfox::getBlock into the template file within PHPfox but encountered some issues. Can someone take a look and identify where the problem lies? I am looking to include a PHP block: core.template-copyright into the followi ...

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera. Surprisingly, the effect only seems to work in Opera when I remove the following properties: -webkit-transform: perspective(1px) translateZ(0); transf ...

The paragraph tag closes automatically once opened

In the process of establishing a news section on my website, I encountered an issue while using the following code: <p id="news-container"> <h1> . . . </h1> <strong>big</strong> . . . </p> Upon inspecting, it appea ...

Can the tab button be used to move to the next field?

Is it possible to navigate to the next field by pressing the tab button? If so, how can we achieve this? Currently, I am utilizing Bootstrap classes col-md-6. Thank you! <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4. ...

It vanishes as soon as you move your cursor away during the animation

I created a button component with text animation, but I'm encountering an issue. When I hover over the button, the animation works smoothly. However, if I quickly move my cursor away or unhover in the middle of the animation, the text disappears unex ...

What is the best way to design a layout utilizing the "display: inline-block, block, or inline" properties in a style sheet?

https://i.sstatic.net/IqsRt.jpg Currently facing an issue with incorrect output. Code Snippet: <!DOCTYPE html> <html> <head> <style> .largebox { display: block; margin: 10px; border: 3px solid #73AD21; } .box1 { disp ...

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

Styles coded in CSS are not reflecting on the displayed webpage, despite being visible in the Integrated

Custom Styling for ASP Membership Login in Visual Studio 2008 I am experimenting with customizing the ASP:Login control by converting it into a template. Here is the updated markup: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx. ...

Can a single volume control be used to manage the audio of multiple sources at once?

I am currently working on a project for my personal interactive video website. I am trying to figure out how to create one volume control that can adjust the audio for multiple tracks at once. Can anyone help me with this? So far, I have successfully crea ...

Uniform height across certain thumbnail images

I have hit a roadblock while working on a project, and I am unable to resolve it :) I am using the Bootstrap grid system and I want to display thumbnails within a content section, with six thumbnails per row. The issue is that while the text below each ima ...

Is it possible to incorporate a similar box on a webpage?

I am trying to find a way to add a similar box to a webpage like the one shown in this image. The design I am referring to is from Reddit's theme, but I would like to know how to create a box with a different color and then have another box next to i ...

Learn the process of including an active class using jQuery from an external active.js file!

This JavaScript code snippet $(function() { $("#navbar-nav li").click(function($) { // remove classes from all $("li").removeClass("active"); // add class t ...

Tips for connecting a href to a div id using JQuery for a parallax slider

I'm currently working on the jQuery slider known as Sequence Master Parallax. My goal is to incorporate a menu at the top that allows users to navigate to each slide. However, I am encountering difficulties in linking the href to the div id. I am unsu ...

Experiencing issues with a modal component in my React project that utilizes Bootstrap

Bootstrap modal implementation issue: {/* Here is the code snippet for the Bootstrap modal */} <div id="small_modal" className="modal fade" role="dialog" aria-labelledby="mySmal ...