I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why.

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <meta charset="utf-8">
    <title>Django Level Two</title>
    <link rel="stylesheet" href="{% static "css/mystyle.css" %}"/>
  </head>
  <body>
  <h1> Hi welcome to Django Level Two </h1>
  <h2> Here are your access records:</h2>

  <div class="djangtwo">
    {% if access_records %}
    <table>
      <thead>
        <th>Site Name</th>
        <th>Date Accessed</th>
      </thead>

      {% for acc in access_records %}
    </tr>
        <td>{{acc.name}}</td>
        <td>{{acc.date}}</td>
      <tr>
      {% endfor %}
      </table>
      {% else %}
      <p>NO ACCESS RECORDS </p>
      {% endif %}

  </div>
  </body>
</html> 

Although the issue doesn't seem to be related to the .css file, here it is for reference:

h1{
  color: red;
}
table, th, td {
  border: 2px solid black
}

Any assistance on this matter would be greatly appreciated. Thank you.

Answer №1

Make sure to fix the order of your <tr> start/end tags, they must be in the correct sequence. Don't forget to include proper end tags for all <td> elements as well.

<tr>
  <td>{{user.name}}</td>
  <td>{{user.email}}</td>
</tr>

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

How can I define the boundaries for the scrolling of a static background image?

Is there a way to limit how far a fixed background image can scroll down a page? Essentially, is it possible to change the background attachment to static when the bottom of the background image is 10px away from the bottom edge of its div container? In t ...

What is the best way to implement a JSON object within an <img> src attribute?

Currently, I am in the process of creating a dynamic Vuetify navigation drawer and I have the intention of storing images in a JSON array. My main inquiry revolves around figuring out if it's feasible to extract the image attribute and incorporate it ...

Using Google fonts offline: a step-by-step guide

Is it possible to download Google fonts and link them offline for a localhost webpage? ...

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

Ways to Conceal <div> Tag

I need help with a prank .html page I'm creating for a friend. The idea is that when the user clicks a button, a surprise phrase pops up. I have managed to hide and unhide the phrase successfully using JavaScript. However, my issue is that when the pa ...

failure in data transmission causing upload issues

Is there a way for me to prevent the character > from causing issues? I have a combo box with an option listed below. I attempted to replace > with &gt;, but it still isn't uploading correctly. <select name="Category3" id="Category3"> ...

The connection between an HTML form and PHP is not being established

variable-passing.php `<form method="post" action="variable-catching.php"> <input type="text" name="name1"/><br/> <input type="text" name="name2"/><br/> <input type="text" name="name3"/><br/> <input type="te ...

Tips for adjusting image size to take up only half of the screen in NextJS

Struggling to resize an image to fit only 50% of the screen in NextJS? The Image component provided by NextJS comes with its own inline styling, making it tricky to customize. Currently, I attempt to style the image by wrapping the Image component in a spa ...

JavaScript - Declaring canvas as a global object

Presently, I am experimenting with HTML5 and using JavaScript to create a basic 2D Tile map. Progress is going smoothly; however, I have come across an issue where I am unable to contain everything within one large function. I am attempting to make the ca ...

Effortlessly retrieving the id attribute from an HTML tag using jQuery

Currently, I am encountering an issue with a code snippet that is designed to extract the value from an HTML tag. While it successfully retrieves a single word like 'desk', it fails when attempting to do so for an ID consisting of two or more wor ...

Display elements that are positioned absolutely within a container with scrolling overflow

My modal contains a scrollable list with many items that have absolute positioned elements causing overflow within the modal. How can I ensure that the absolute positioned elements are visible in this scenario? .modal { width: 300px; border: 1px ...

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

Issue at hand : My JavaScript is not functioning properly in my .php files CSS not applying while scrolling *CSS Files are named "var.css" #kepala { padding: 10px; top: 0px; left: 0px; right: 0px; position: fixed; background - c ...

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

Utilize images inputted via an HTML DOM file uploader within p5.js

I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

Having trouble accessing the input class with jQuery

When I click the "Reset To Default Settings" button in my form, I want to clear the default colors in my 4 color pickers. Each of them has an input type text field with the class anyicon-form-colorpicker. To achieve this, I locate the <a> tag and use ...

Max call stack size exceeded error encountered and logged without catching

While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...

What is the best way to arrange two divs inside a main div so they remain fixed in place at all times?

Struggling with aligning two smaller divs within a main wrapper for my website. Despite confining them to the main div, they don't stay fixed or aligned properly. How can this issue persist even when contained within a main div? I've attempted s ...

When using the POST method to modify data via an HTML form, the previous values may be

I am currently developing a CRUD system and focusing on the Update functionality. My task involves updating existing user data with new information submitted through an HTML form. At this stage, I am working on retrieving the POST values from the HTML for ...

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...