The exact problem with aligning the table

Below is a simplified version of my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body style="font-size: 36px">
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="min-width:100%" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

                <div align="center">
<table align="center" width="720" height="3653" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="720" valign="top" colspan="14">

                <img src="" width="720" height="207" border="0" style="display:block" alt=""></td>
    </tr>
  
    ... (content continues)

    </tr>
 </table>
</div></body>
</html>

I'm facing issues with alignment within a 720 unit width, particularly the elements in row three and the icons at the bottom. The icons have varying widths to sum up to 720 but don't align properly:

The screenshots below demonstrate the misalignment issue:

Image 1

https://i.stack.imgur.com/eR1lI.png

Image 2

https://i.stack.imgur.com/1zC5k.png

htmlcsshtml-table

Answer №1

Are you not familiar with using CSS? It might simplify things for you to create a separate file for styling in this project. Additionally, you don't necessarily need to format everything as tables. Normal <div> elements could work just fine if I'm understanding your issue correctly. Take a look at this screenshot displaying the result based on the code below.

Below is my Code:

.table {
  border: 1px solid grey;
  width: 1080px;
  height: 100%;
  margin: auto;
}
.box1 {
  border: 1px solid grey;
  height: 300px;
  width: 720px;
  margin: auto;
}
.box2 {
  border: 1px solid grey;
  height: 300px;
  width: 720px;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.box2 p {
  color: white;
  font-size: 30px;
}
.smallTable {
  width: 1080px;
  height: 100px;
  border: 1px solid grey;
  text-align: center;
  margin: auto;
}
.smallBox {
  height: 100px;
  width: 85px;
  border: 1px solid grey;
  display: inline-block;
}
.bigBox {
  height: 100px;
  width: 125px;
  border: 1px solid grey;
  display: inline-block;
}
<html>

<head>
  <link type="text/css" rel="stylesheet" href="style.css" </head>

  <body>
    <div>
      <div class="table">
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box2">
          <p>Statement</p>
        </div>
      </div>
      <div class="smallTable">
        <div class="smallBox"></div>
        <div class="smallBox"></div>
        <div class="smallBox"></div>
        <div class="smallBox"></div>
        <div class="smallBox"></div>
        <div class="smallBox"></div>
        <div class="smallBox"></div>
        <div class="bigBox"></div>
      </div>
    </div>
  </body>

</html>

As illustrated, I use style properties like margin: auto; to center my <div> elements within their parent container. The alignment of the bottom eight boxes can also be done similarly by utilizing display: inline-block; to make them appear horizontally.

I trust this provides some clarity to your inquiry. Embedding extensive in-line styling doesn't seem practical. Strive for DRY programming practices whenever feasible, and considering tools like CSS, repeating styling instructions isn't really necessary.

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

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...

javascripthtmlnode.jsangulardom

Hovering Div Troubles

I've been working on creating a hover effect for the blocks on my website. Everything was going smoothly until I reached the last block. The hover effect appears to be displaced, as shown in this sample link. Although the CSS code I'm using seem ...

htmlcss

Combining two flex elements with auto-growing capabilities in react-native

I am excited about using react-native to have a TextInput aligned with a MaterialIcons.Button in the same line. I have been trying to center these elements horizontally but haven't been successful with the code below: import React from 'react&apo ...

cssreact-nativeflexbox

I am experiencing an issue with Bootstrap's Jumbotron where the bottom border is not visible even after setting it. I am quite curious as to why

I'm new to using bootstrap and I've encountered an issue with the Jumbotron class. Specifically, I have set a border for the Jumbotron and it appears on the top, left, and right sides, but for some reason, the bottom border is missing. After goi ...

htmlcsstwitter-bootstrapborder

Unable to extract certain features from Zillow's website

My current project involves extracting data from the Zillow website. For example, check out this link: I've encountered an issue while attempting to scrape the price and tax history sections. It seems that these elements are loaded using JavaScript ...

pythonhtmlseleniumbeautifulsoupscreen-scraping

Is Bootstrap CSS Carousel malfunctioning following a float adjustment?

Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...

htmlcssbootstrap-4

To prevent the default alignment in case the text exceeds the input length, stop the automatic alignment

I have a query regarding an input field with a maximum length of 4 characters. The appearance is such that these 4 characters seem to be delineated by borders which are actually 3 lines displayed above the input field. When I enter the fourth character, a ...

javascriptjqueryhtmlcss

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Unable to load the requested resource: net::ERR_FAILED

I am facing an issue while trying to write React code. When using Chrome, I encountered the following warning: Access to XMLHttpRequest at 'file:///D:/programe/code/Vscode/ReactDemo/HelloWorld/test.js' from origin 'null' has been block ...

javascripthtmlreactjsgoogle-chromedebugging

stepper vue with previous and next buttons

I am trying to create previous and next buttons in Vue, but I am struggling a bit because I am new to learning Vue. I have some methods like this.activeIndex < this.activeIndex - 1 that I need to implement. Can someone help me with how to do this? cons ...

javascripthtmlvue.jsvue-componentstepper

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Custom AngularJS directive fails to reflect changes in model after selecting a file

I recently created a custom directive called ng-file-chosen, which is supposed to capture the selected file name from an <input> element and bind it to the ng-model passed in. In the code snippet below, the result of ng-file-chosen is linked to mode ...

javascripthtmlangularjsangularjs-directive

Display the accurate duration based on the dates selected in an HTML form automatically

If someone has office hours on Monday, Wednesday, and Friday from 7:00 am to 7:00 pm, and on Tuesday and Thursday from 10:00 am to 9:00 pm, the dropdown menu should display only the timings of 7:00 AM to 7:00 PM if the selected date is a Monday, Wednesda ...

javascriptjqueryhtml

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

javascriptjqueryhtmlcss

Struggling with Responsiveness: Challenges with Detailed Information and Image Grid Design

Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...

javascriptcssreactjsmaterial-ui

Verify for any alterations in the code by utilizing the inspect element feature

Currently dealing with a security concern regarding my older Java application. Is there a method available to detect any modifications made to my code (HTML or script) through Developer Tools on the user's end? This would allow me to prevent form subm ...

javascriptjqueryhtmlsecuritybrowser

What is the best way to interact with an element in Python Selenium once it has been located?

I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...

pythonhtmlcsspython-3.xselenium

What is the best way to capture a form submission when there are no errors?

My form includes a validation check for valid fields upon submission. Here is an example of how it is structured: <form class="form-horizontal" method="post" action="#" name="basic_validate" id="basic_validate" /> <div class="con ...

phpjavascriptjqueryhtml

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

htmlangulartypescriptpipeionic4