What could be the reason behind my table appearing all crammed up in a single

My table is appearing in a single cell, and I can't figure out what's wrong. Can someone please take a look and let me know where I messed up?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Fire department Sponsors</title>
</head>

<body>
 <div style="width:1020px; height:1020px; float:center; background-image:url(images/zombie_5k_TM_AP_stripped.png)">
 <div class="home">
            <img src='images/home_button.jpg' name="register"  onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
        </div>
        <div class="register">
            <img src='images/register_button.jpg' name="register"  onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
        </div>
        <div class="sponsor">
            <img src='images/sponsor_button.jpg' name="sponsor"  onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'"/>
        </div>
        <div class="gallery">
            <img src='images/gallery_button.jpg' name="gallery"  onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
        </div>
  <div class="sponsors">
<table>
    <tr>
        <td align="center" width="250">Seth Jackson - Edward Jones</td>
        <td align="center" width="250">Heritage Mechanical </td>
    </tr>
    <tr>
        <td align="center" width="250">Mike Flanagan – Iron Range Auto </td>
        <td align="center" width="250">&nbsp;</td>
    </tr>
</table>
 </div>
 <div class="sform">
 <p align="center">
    <a style="color: #D91D1F;"href="Images/ZX5K Sponsorship Agreement.pdf" target="_blank">ZX5K Sponsorship Agreement</a></p></div></div>
 </body>
 </html>

Here is the CSS code for the .sponsors class:

.sponsors {
    position: absolute;
    top: 280px;
    left: 340px;
}

If you'd like to see the issue for yourself, here is the link:

htmlcss

Answer №1

Your table is not displaying properly because all the cells are stacked on top of each other. This issue occurs because you have set position: absolute; in your TD element within your main.css line 62.

td{
    color: #D91D1F;
    position: absolute;
}

As a result, each TD is positioned at the top left corner of the table. Removing this line will fix the display issue.

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

implement some level of control within the ngFor directive in Angular

For instance, let's say I have an ngfor loop: <ng-container *ngFor="let setting of settings | trackBy: trackById"> <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-me ...

htmlangulartypescriptangular-material

Display or conceal form elements depending on the JSON response

Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...

javascriptjqueryhtmljson

Tips for displaying only one image when clicked and hiding other divs:

Currently tackling a project that involves JavaScript and I've hit a roadblock. Before you dive into the text, take a look at the image. Check out the picture here. I have successfully created a slider, but now I want to implement a feature where cli ...

javascriptjqueryhtmlcss

What is the best way to title an uploaded chunk with HTML5?

Here is the script I am working with: function upload_by_chunks() { var chunk_size = 1048576; // 1MB function slice(start, end) { if (file.slice) { return file.slice(start, end); } else if (file.webkitSlice) { ...

javascriptphpjqueryajaxhtml

What could be the reason for my clickable div not functioning as a link in this particular code?

Here is my jQuery script: $('.projektet').click(function(){ var url = $(this).find("a").attr("href"); window.location = url; }); <div class='projektet'> <h3>".$alias." ".$expertis." ".$other."</h3> & ...

jqueryhtml

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...

javascriptjqueryhtmlcssjquery-masonry

The sliding div unites with the bottom button, rather than the top one

When hovering over the upper left button, a div with sample description slides down. However, I am facing two challenges that I cannot seem to resolve. The description is supposed to merge with the second button but instead merges with the first one. I a ...

htmlcss

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...

javascriptcssreactjsreact-native

What strategies can be used to avoid a single dangling word at the end of a line within an HTML element?

I am in the process of developing a straightforward webpage with marketing content. One aspect I find unfavorable is when a line of text stretches too long and breaks onto the next line, which is acceptable; however, it often splits in a manner where there ...

htmlcssformatting

Eliminate the mystery overflow in your CSS styling

My website is experiencing overflow on the x axis, even though all vw/width properties are set to 100. I suspect that the .logout element may be causing this issue, but I'm not sure what exactly needs to be modified to resolve it. Any assistance would ...

htmlcss

Tips for ensuring the accurate retrieval of prop values by waiting for the value to be set

Encountering an issue with the .toUpperCase() method within one of my components, resulting in the following error: TypeError: Cannot read properties of undefined (reading 'toUpperCase') This problem seems to stem from a race condition in fetc ...

javascriptcssreactjsreact-nativematerial-ui

I am seeking for the HTML table to display the outcome depicted in the image

My goal is to achieve the design shown in the image below with my code, but unfortunately it's not giving me the desired result. <form> <table> <tr> <td><label for="Uname">User Name:&l ...

html

Experiencing an overflow of redirects in PHP contact form

I am encountering an issue on my website where there are too many redirects occurring when attempting to submit a form that is supposed to be sent via email. The connection between the form and email seems to be correct. Form Code: <section class=" ...

phphtmlformsemailhttp-redirect

The grid is out of alignment, causing elements to jump to the next row

After taking an online course at TreeHouse, I used the provided HTML & CSS code and made some adjustments to create a layout with 10 columns instead of the original 12 within a 1000px container. The columns were converted to percentages to fit my needs. I ...

htmlcssgridfluid

Is it possible to include Helvetica or a similar font in my web application for shipping?

My web-app is Java/HTML based and hosted on the cloud. Users will access it using IE, Chrome or Mozilla. I would like to use Helvetica or a similar font, but they are not readily available on most systems (windows/IE/Chrome/Mozilla). Is there a way for me ...

htmlcssfonts

Switch up the background image when hovering over it

Could the proportions of the image be contributing to the issue at hand? #menu { background: black; width: 100%; height: 45px; } #menu ul { text-decoration: none; list-style-type: none; } #menu li { text-decoration: none; display: inline; font-size: ...

htmlcsslist

Implementing a sorting mechanism for ajax data retrieval

Currently, I am using the code below to save HTML created with jQuery in a database and retrieve it later: $('div[read]').each(function(){ var kelas = $(this).attr('kelas'); $.post('admin.php',{kelas:kelas,id:id},func ...

jqueryhtmlajaxeach

The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript) HTML <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcssbootstrap-5jquery-ui-tooltip

What are some ways to make the search bar on my website smaller in both length and width?

I have a WordPress website with the ivory search plugin installed for the search functionality. You can check out my website at www.osdoc.in. I am looking to make the search bar shorter and narrower as it is currently causing the menu icons to encroach on ...

csswordpresswordpress-themingcustom-wordpress-pages

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

htmlarraystypescript