Table with empty cells in HTML

This question may seem easy, but for those who haven't used HTML in a while, it can be quite frustrating. You can view my HTML table at the following link:

https://jsfiddle.net/mr_muscle/Lw5o7ary/

Here is the HTML code:

<table>
    <thead>
      <tr>
        <th>Account status:</th>
        <th>Portfolios invested:</th>
        <th>Date joined:</th>
        <th>MangoPay status:</th>
        <th>NorthRow status:</th>
        <th>Investor type:</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>status</td>
        <td>Number of portfolios</td>
        <td>17 Feb, 2019</td>
        <td>Approved</td>
        <td>Approved</td>
        <td>Inexperienced</td>
      </tr>
      <tr>
        <td colspan='2'>Suspend user</td>
        <td colspan='2'>Member for 1 y, 10m</td>
        <td>Change</td>
      </tr>
    </tbody>

I'm looking to create tables without spaces like this example image: https://i.sstatic.net/fRDmh.png

htmlcss

Answer №1

Adjust the Style as Necessary

table {
  border-collapse: collapse;
  border-spacing: 0 20px;
}

th {
  margin: 15px;
  padding: 30px;
}

td {
  margin: 50px;
  padding: 25px;
}
<table>
  <thead>
    <tr>
      <th>Account Status:</th>
      <th>Invested Portfolios:</th>
      <th>Joining Date:</th>
      <th>MangoPay Status:</th>
      <th>NorthRow Status:</th>
      <th>Investor Type:</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Active</td>
      <td>5 portfolios</td>
      <td>22 Mar, 2021</td>
      <td>Verified</td>
      <td>Pending</td>
      <td>Experienced</td>
    </tr>
    <tr>
      <td colspan='2'>Block User Access</td>
      <td colspan='2'>Member for 2 y, 3m</td>
      <td>Update</td>
    </tr>
  </tbody>
</table>

Answer №2

To enhance the appearance of your table, consider applying padding to the table cells:

td {
  padding-left: 20px;
  padding-right: 20px;
}
<table>
  <thead>
    <tr>
      <th>Account status:</th>
      <th>Portfolios invested:</th>
      <th>Date joined:</th>
      <th>MangoPay status:</th>
      <th>NorthRow status:</th>
      <th>Investor type:</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>status</td>
      <td>Number of portfolios</td>
      <td>17 Feb, 2019</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Inexperienced</td>
    </tr>
    <tr>
      <td colspan='2'>Suspend user</td>
      <td colspan='2'>Member for 1 y, 10m</td>
      <td>Change</td>
    </tr>
  </tbody>
</table>

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

Converting HTML content into a single string simplifies data manipulation and extraction

exampleHTML=" This is sample HTML code that needs to be converted into a string using JavaScript </p>" I am looking to transform it into a single string format like str="This is sample HTML code, that needs to be converted into a string ...

javascripthtmlreactjsstring

Creating a function that counts the number of times a button is clicked

I want to have the "game" button appear after the user clicks the "next-btn" 2 times. Once the multiple choice test has been completed twice, I'd like the game button to show up and redirect the user to a separate HTML page called "agario.html." I&ap ...

javascripthtml

"Uploading" a picture using jQuery

I have been using this particular code snippet to display messages. setTimeout(function(){ o.html(o.html() + "Username:<br>" + msg[r] + "<br><hr>") }, 7000); It's effective in posting messages from an array and adding some st ...

javascriptjqueryhtmlcss

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

javascripthtmlcssanimation

Interactive front end design for decision trees

On the front end, I aim to enable users to influence the outcome of a Decision Tree based on their selections. For my Django-React App, I have adopted the style and tree example from the codeplayer. You can find it here: I am tasked with creating an unor ...

javascripthtmlcssreactjs

Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions

When working with HTML and bootstrap (3.7) CSS, I often come across this issue: <div class="row"> <div class="col-xs-6">Stretch ME!</div> <div class="col-xs-6">Conditional</div> </div> Sometimes the "Conditional" d ...

csstwitter-bootstrapflexbox

Jquery .each() not functioning as expected when defined by class - only showing the first element and not the remaining ones

There's a table below showcasing items in a shopping cart <table border='1'> <thead> <tr> <th colspan='3'> <strong id='jcart-title'>Shopping Cart</strong> (3 Items) </th> </t ...

jqueryhtmlclasshtml-tableeach

Is it possible for the box-shadow CSS property to include padding?

Can a red outline like this be created around a shape using the box-shadow property but at a certain distance? ...

cssreactjs

What does the term "the selected font size" mean when defined in em units?

Exploring the query raised in this post: Why em instead of px?, the top voted response sheds light on the nature of em: The unit 'em' is not fixed but rather relative to the current font size. It varies according to the user's chosen font p ...

htmlcssfont-size

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

javascriptjqueryhtmlcssgoogle-chrome

Tips on connecting a file upload button to a flip card

In my current project located in index.html, I have integrated a flip card as a profile photo feature. Additionally, I have included a file uploader button on the page. However, I am struggling to connect the functionality of the file uploader button to au ...

htmlcss

Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...

javascripthtmlcss

Is it possible to utilize X-Y coordinates as repositories for values beyond just X-Y coordinates themselves?

I am in the process of creating a tile-based grid and I need to expand the X-Y coordinates to include additional values for determining characteristics of each tile, such as resources (for example, food, water, stone, lumber) within a game context. Conside ...

javascripthtmlhtml5-canvas

How to access a shadowroot element using R Selenium

Currently, I'm dealing with web scraping where one of the websites presents a 'Accept cookies' button within a shadow root. To address this issue, I sought assistance on how to click this button in discussions found here: Click on accept co ...

htmlcssrseleniumxpath

Place the image on the canvas

I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...

javascripthtmlcanvashtml5-canvas

challenges with positioning div elements using relative CSS styling

This is a section of my code: CSS : .body .left, .right { position:relative; z-index:6; display:inline-block; } .body .left { top:0; left:0; width:100px; height:300px; margin-right:10px; borde ...

htmlcss

Grids designed in the style of Pinterest

Seeking advice on aligning divs in a Pinterest-style layout. Currently, my setup looks like this: https://i.sstatic.net/erlho.png But I want it to look more like this: https://i.sstatic.net/K9FnD.png Would greatly appreciate any tips or suggestions on ho ...

javascriptjqueryhtmlcss

Make sure to utilize the className attribute when styling a Material-UI component

I am attempting to apply CSS styles to a Material-UI component. defined in MyCss.css .trackTitle { color:white; } located in myComponent.js import "./MyCss.css" <Grid container item xs={1} className="trackTitle"> change col ...

javascriptcssreactjs

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.</p> ...

phphtml

Combining three input files in a single form and securely storing them in the database

After trying several solutions on Stack Overflow, I haven't found any that helped me or addressed the issue at hand. I have a form with three input fields, and while I know I can use the 'multiple' attribute on one field, I specifically nee ...

phphtmlmysql