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

What is the computed value of HTML and body?

Is there a specific reason why the body tag has a default margin while HTML does not? Could there be any practical explanation for this design choice? ...

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...

The HTML textarea is not updating properly when using jQuery's keypress event

I am facing an issue with my forms on a webpage, each containing an html textarea: <textarea name="Comment" class="inputTextArea">Hello World!</textarea> There is a javascript event handler that automatically submits the fo ...

Ensure that the default value in the text box remains unchanged until new text is input by utilizing jQuery

Can you please review my code snippet on http://jsfiddle.net/7995m/? The issue I'm facing is that the default text in the text box disappears as soon as it's clicked. What I want is for the default text to remain until the user starts typing. Her ...

Trouble with Bootstrap popover displaying content

I've been working on implementing the bootstrap popover feature on a website and have had some success. I managed to get the popover to appear when the link is clicked, but unfortunately, I'm not seeing any content in the box other than the title ...

Image-switching button

I'm new to JavaScript and struggling with my first code. I've been staring at it for two days now, but can't figure out what's wrong. The goal is to create an HTML page where the user can change an image by clicking on a button, and th ...

Filtering HTML with HtmlAgilityPack using custom queries

I am faced with a block of two HTML elements in this format: <div class="a-row"> <a class="a-size-small a-link-normal a-text-normal" href="/Chemical-Guys-CWS-107-Extreme-Synthetic/dp/B003U4P3U0/ref=sr_1_1_sns?s=automotive&amp;ie=UTF8& ...

Aligning an SVG icon at the center of a button

I have elements that are currently being used as buttons, but I want to switch them out for actual button tags. This would improve accessibility and allow keyboard navigation using the tab key to focus on my buttons. Each button contains a centered SVG ima ...

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Consider the following three scenarios: document.adoptNode, document.importNode, and document.createElement with assigned properties. In all cases, the video autoplay feature is activated even when it's not connected to the DOM. This behavior diffe ...

Adding text with jQuery

Currently, I am utilizing the Jquery text editor plugin known as JqueryTE. While adding some functions to it, I have encountered a roadblock. Specifically, I am attempting to insert additional text into the source of the textarea but have been unsuccessfu ...

Combine div elements with identical class

Is there a way to utilize jQuery in order to enclose groups of elements with the same class within a div? I have been searching for a solution, but haven't found one yet. Here's an example of the HTML: <div class="view-content"> < ...

SVGs are not resizing correctly in Internet Explorer and there is unnecessary blank space around them

Recently, I made the decision to switch to using SVG symbols for one of my projects. However, I encountered a challenge as I needed these SVGs to be responsive. My main objective was to minimize the number of HTTP requests, leading me to explore the option ...

Adding data to an AngularJS template

I am encountering an issue with a flag that I am toggling between true and false to alter the display of certain elements on my page. While it works outside of the template, integrating this value into the template itself has proven challenging. restrict: ...

What is the right way to nest a SCSS rule for a specific selector within a list using the "&" symbol?

I have a question that I couldn't find the answer to in any documentation or on Stack Overflow. While this example may not be perfect, it should give you a basic understanding of what I'm trying to achieve. Illustration .btn-group { .btn ...

The HTML link is not directly attached to the text, specifically in Internet Explorer

When viewing my website in Chrome, the menu links in the Header function correctly. However, in Internet Explorer (specifically version 11), hovering over 'HOME,' 'LISTINGS,' or 'AGENTS' reveals that the displayed URL is incor ...

The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...

Utilizing JSON for HTML conversion in Codeigniter

public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...

Is it possible to showcase a dropdown list within a constantly changing table?

I have a table code snippet that I need help with <fieldset class="tabular"><legend><%= l(:redmine_taskjuggler) %></legend> <%= labelled_fields_for(@issue) do |f| %> <div id="taskjuggler" class="attributes"> <div cl ...

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

how to enable drag and drop functionality based on names in angularjs

In my project using angular js, I have implemented a drag and drop feature that allows items to be dragged between cells in two directions. I now want to enhance this functionality by allowing members with 'a's (e.g. 1a, 2a, etc.) to be dragged ...