Ways to add space around the td element and properly align the content within it

Question

Ways to add space around the td element and properly align the content within it

I've recently delved into the realm of web development, and I'm encountering some challenges with HTML alignment. Despite exploring various resources and attempting to utilize align="left"/right/center attributes, I'm still struggling to achieve the desired alignment. Any guidance on how to proceed would be greatly appreciated.

Here is my intended design: https://i.sstatic.net/oCy8h.png

This is what I have ended up with. Please provide me with some direction: https://i.sstatic.net/U2Z4b.png

Below is the code I've created. Apologies if there are any basic errors - mistakes are part of the learning process. I have included my CSS, although it doesn't seem to be updating in the snippet.

.boxUp {
background-color: #dedacf;
border-color: #dedacf #dedacf #dedacf #dedacf;
border-style: solid;
border-width: 1px 1px 1px 5px;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="boxup">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" style="width: 25%">dropdown:</td>
<td align="left" style="width: 25%">
<select name="dropdown" class="pulldown1" id="dropdown">
<option value="Dubai">Dubai</option>
<option value="Domestic 2">Arabia</option>
<td align="right" style="width: 25%">textbox:</td>
<td style="width: 25%"><input name="textbox" type="text"
size="3" maxlength="3" class="tType1" value=""></td>
</tr>
</table>
</td>
</tr>

html css

Answer 1

Answer №1

The table belonging to OP contains another table within one of its cells, complicating the layout process. The select element was missing a closing tag, as well as its parent <td>. To remedy this, I included border-spacing:5px for both tables and applied black borders to the tables along with red dashed borders to the <td> elements.

To view the corrected version, refer to Snippet 2.

You only require the following CSS code:

table {
  border-spacing: 0;
  border-collapse: separate;
}

You can adjust the border-spacing property to any desired value in pixels (px), em units, or anything else you prefer. The subsequent Snippet showcases how this property works, enabling real-time adjustments to the table's spacing.

SNIPPET 1

var in1 = document.getElementById('in1');

in1.addEventListener('change', function(e) {
  var x = document.getElementById('tableX');
  var num = parseInt(this.value, 10);
  x.style.borderSpacing = num + "px";
}, false);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>TABLE</title>

  <style>
    /* CSS styles omitted for brevity */
  </style>
</head>


<body>
  <section id="ii">
    <header>
      <label>Border-Spacing:
        <input id='in1' type='number' min='0' max='15' value='0'>
      </label>
    </header>
    <table id="tableX" class="x" width='90%'>
      <thead>
        <tr>
          <th id="h0">Header: 0</th>
          <th id="h1">Header: 1</th>
          <th id="h2">Header: 2</th>
          <th id="h3">Header: 3</th>
          <th id="h4">Header: 4</th>
        </tr>
      </thead>
      <tbody>
        <!-- Table body rows omitted -->
      </tbody>
    </table>

  </section>

</body>

</html>

SNIPPET 2

table {
  border-spacing: 5px;
  border: 1px solid black;
}
td {
  border: 3px dashed red;
}
.boxUp {
  background-color: #dedacf;
  border-color: #dedacf #dedacf #dedacf #dedacf;
  border-style: solid;
  border-width: 1px 1px 1px 5px;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td class="boxup">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <!-- Nested table content omitted -->
      </table>
    </td>
  </tr>
</table>

Answer 2

The table belonging to OP contains another table within one of its cells, complicating the layout process. The select element was missing a closing tag, as well as its parent <td>. To remedy this, I included border-spacing:5px for both tables and applied black borders to the tables along with red dashed borders to the <td> elements.

To view the corrected version, refer to Snippet 2.

You only require the following CSS code:

table {
  border-spacing: 0;
  border-collapse: separate;
}

You can adjust the border-spacing property to any desired value in pixels (px), em units, or anything else you prefer. The subsequent Snippet showcases how this property works, enabling real-time adjustments to the table's spacing.

SNIPPET 1

var in1 = document.getElementById('in1');

in1.addEventListener('change', function(e) {
  var x = document.getElementById('tableX');
  var num = parseInt(this.value, 10);
  x.style.borderSpacing = num + "px";
}, false);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>TABLE</title>

  <style>
    /* CSS styles omitted for brevity */
  </style>
</head>


<body>
  <section id="ii">
    <header>
      <label>Border-Spacing:
        <input id='in1' type='number' min='0' max='15' value='0'>
      </label>
    </header>
    <table id="tableX" class="x" width='90%'>
      <thead>
        <tr>
          <th id="h0">Header: 0</th>
          <th id="h1">Header: 1</th>
          <th id="h2">Header: 2</th>
          <th id="h3">Header: 3</th>
          <th id="h4">Header: 4</th>
        </tr>
      </thead>
      <tbody>
        <!-- Table body rows omitted -->
      </tbody>
    </table>

  </section>

</body>

</html>

SNIPPET 2

table {
  border-spacing: 5px;
  border: 1px solid black;
}
td {
  border: 3px dashed red;
}
.boxUp {
  background-color: #dedacf;
  border-color: #dedacf #dedacf #dedacf #dedacf;
  border-style: solid;
  border-width: 1px 1px 1px 5px;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td class="boxup">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <!-- Nested table content omitted -->
      </table>
    </td>
  </tr>
</table>

Ways to add space around the td element and properly align the content within it

Answer №1

SNIPPET 1

SNIPPET 2

Similar questions

Sliding divider across two div containers with full width

Ensure that the height of the div element is equal to 100% of

Design a sophisticated background using CSS

Capturing text content in an HTML attribute - using Selenium

Changing color of entire SVG image: a step-by-step guide

AngularJS Treeview with Vertical Line Styling using CSS

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Switching my Selenium code to HtmlUnit: A Step-by-Step Guide

Understanding how to activate a React navbar button is essential for creating a seamless user

Filling out a Form in Advance

Pattern matching: Identify text elements specifically within an HTML tag

Verifying the selection state of a dynamically generated checkbox with JavaScript

Implementing checkboxes for each API data in JavaScript

Tips for keeping div and input tags selected even after a user clicks

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

Issues encountered while attempting to convert HTML Image and Canvas Tags to PDF within Angular 2

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

What causes images to shift when resizing in Chrome, but not in Firefox or Safari?

What is the way to determine the length of a list in a velocity template?