How to personalize cell and border spacing within the <table> HTML element

Question

How to personalize cell and border spacing within the <table> HTML element

Looking to create a design similar to this

https://i.sstatic.net/qONUa.png

I attempted using border-spacing, but it applies between all cells. Is there a way to eliminate the space only between label and text cells? Or would using divs for the entire structure be better? What is the recommended approach to achieve this layout?

EDIT: Appreciate all the helpful suggestions, you are amazing! I will remember to use tables for tabular data only. For now, I am going to test out GCyrillus's solution.

html css

Answer 1

Answer №1

Are you a fan of flexbox? If so, make sure to adjust the container paddings and child margins for optimal layout.

* {
  box-sizing:border-box;
}
main {
  display:flex;
  flex-wrap:wrap;
  margin:2em;
  padding:1em 2em;/* replicate your border-spacing */
  border:solid;
  justify-content:space-between;
}
header {
  border:solid;
  width:100%;
  padding:2em;/* adjust based on content , value used for demonstration */
}
div {
  margin-top:2em;/* replicate your border-spacing */
  width:43%;/* adjust the width based on your desired middle spacing */
  display:flex;
}
div p {
  margin:0;/* reset */
  flex:1;
  border:solid;
  padding:2em;/* adjust based on content , value used for demonstration */
}

<main>
  <header>header</header>      
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
</main>

Answer 2

Are you a fan of flexbox? If so, make sure to adjust the container paddings and child margins for optimal layout.

* {
  box-sizing:border-box;
}
main {
  display:flex;
  flex-wrap:wrap;
  margin:2em;
  padding:1em 2em;/* replicate your border-spacing */
  border:solid;
  justify-content:space-between;
}
header {
  border:solid;
  width:100%;
  padding:2em;/* adjust based on content , value used for demonstration */
}
div {
  margin-top:2em;/* replicate your border-spacing */
  width:43%;/* adjust the width based on your desired middle spacing */
  display:flex;
}
div p {
  margin:0;/* reset */
  flex:1;
  border:solid;
  padding:2em;/* adjust based on content , value used for demonstration */
}

<main>
  <header>header</header>      
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
  <div>
    <p> Example text</p>
    <p>Example text</p>
  </div>
</main>

Answer 3

Answer №2

My thoughts and ideas are all gathered in the Snippet, which takes inspiration from GCyrillus' solution but incorporates a unique twist with the use of display:table-* properties. It is a bit intricate and delicate; any unnecessary additions could lead to significant changes. However, as it stands, it functions exceptionally well.

/* Flex/Display-Table Layout */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
|| This layout utilizes flexbox for element positioning
|| and employs some display: table-* properties to ensure they
|| behave like "table" components. The fundamental idea is:
|| If an element has children*, turn it into a flex container†.
|| If an element lacks children or the children don't need control,
|| transform it into a table component using suitable display:
|| table-*‡ property.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| main.table
|| Designed to contain its children - header.caption, section.row -
|| in a structured layout where the children adhere to their relative positions
|| while being flexible due to their percentage-based dimensions.
*/
// Vertical alignment with evenly spaced children
// horizontally centered
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| header.caption
|| Since header.caption has no children (ignoring text node),
|| it is assigned display: table-row.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| section.row
|| As section row contains children like label.cell
|| that require specific positioning, it's set as a flex container.
*/
// Horizontal alignment producing two separate columns
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| label.cell
|| label.cell is deemed a flex-container because it houses children
|| and requires minimal assistance for proper alignment.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| input.text and div
|| The request was to have 'label' and 'text' elements adjacent
|| without any spacing between them. Even though 'label' is not
|| a direct sibling of 'text', I styled their borders separately to create
|| the illusion of adjacency. The 'div' element was used to position
|| the text 'LABEL'; there might be a better approach, but none comes to mind.
*//*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//*Children
|| Direct descendants within the parent element, excluding grandchildren.
//†Flex Container
|| A parent element with flex properties controlling their childrens' positioning.
//‡display: table-* Proerties
|| Specific values within the CSS property display: 
||   table, 
||   inline-table, 
||   table-row, 
||   table-cell
|| Other related table values exist, but the mentioned ones are most relevant.
*/
// http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
// http://colintoh.com/blog/display-table-anti-hero

.table {
  display: flex;
  flex-flow: column nowrap;
  align-items: space-around;
  align-content: space-between;
  justify-content: center;
  width: 75vw;
  height: 75vh;
  padding: 0 1%;
  border: 4px solid black;
}
.caption {
  display: table-row;
  width: 100%;
  height: 27%;
  border: 2px solid blue;
  text-align: center;
  font-size: 3em;
}
.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 27%;
  padding: 1% 0;
  border: 0 none transparent;
}
.cell {
  display: inline-block;
  position: relative;
  width: 48%;
  height: 100%;
  border: 2px solid red;
  border-bottom: 3px solid red;
  font-size: 1.5em;
}
.cell div {
  display: table-cell;
  position: absolute;
  top: calc(50% - .5em);
  left: 5px;
  line-height: 100%;
}
.text {
  display: table-cell;
  float: right;
  height: 100%;
  width: 50%;
  padding: 0 5px;
  border: 0 none transparent;
  border-left: 1px solid green;
  border-bottom: 1px solid red;
  font-size: inherit;
}

<main class="table">
  <header class="caption">HEADER</header>
  <section class="row">
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
  </section>
  <section class="row">
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
  </section>
</main>

Answer 4

My thoughts and ideas are all gathered in the Snippet, which takes inspiration from GCyrillus' solution but incorporates a unique twist with the use of display:table-* properties. It is a bit intricate and delicate; any unnecessary additions could lead to significant changes. However, as it stands, it functions exceptionally well.

/* Flex/Display-Table Layout */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
|| This layout utilizes flexbox for element positioning
|| and employs some display: table-* properties to ensure they
|| behave like "table" components. The fundamental idea is:
|| If an element has children*, turn it into a flex container†.
|| If an element lacks children or the children don't need control,
|| transform it into a table component using suitable display:
|| table-*‡ property.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| main.table
|| Designed to contain its children - header.caption, section.row -
|| in a structured layout where the children adhere to their relative positions
|| while being flexible due to their percentage-based dimensions.
*/
// Vertical alignment with evenly spaced children
// horizontally centered
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| header.caption
|| Since header.caption has no children (ignoring text node),
|| it is assigned display: table-row.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| section.row
|| As section row contains children like label.cell
|| that require specific positioning, it's set as a flex container.
*/
// Horizontal alignment producing two separate columns
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| label.cell
|| label.cell is deemed a flex-container because it houses children
|| and requires minimal assistance for proper alignment.
*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|| input.text and div
|| The request was to have 'label' and 'text' elements adjacent
|| without any spacing between them. Even though 'label' is not
|| a direct sibling of 'text', I styled their borders separately to create
|| the illusion of adjacency. The 'div' element was used to position
|| the text 'LABEL'; there might be a better approach, but none comes to mind.
*//*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//*Children
|| Direct descendants within the parent element, excluding grandchildren.
//†Flex Container
|| A parent element with flex properties controlling their childrens' positioning.
//‡display: table-* Proerties
|| Specific values within the CSS property display: 
||   table, 
||   inline-table, 
||   table-row, 
||   table-cell
|| Other related table values exist, but the mentioned ones are most relevant.
*/
// http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
// http://colintoh.com/blog/display-table-anti-hero

.table {
  display: flex;
  flex-flow: column nowrap;
  align-items: space-around;
  align-content: space-between;
  justify-content: center;
  width: 75vw;
  height: 75vh;
  padding: 0 1%;
  border: 4px solid black;
}
.caption {
  display: table-row;
  width: 100%;
  height: 27%;
  border: 2px solid blue;
  text-align: center;
  font-size: 3em;
}
.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 27%;
  padding: 1% 0;
  border: 0 none transparent;
}
.cell {
  display: inline-block;
  position: relative;
  width: 48%;
  height: 100%;
  border: 2px solid red;
  border-bottom: 3px solid red;
  font-size: 1.5em;
}
.cell div {
  display: table-cell;
  position: absolute;
  top: calc(50% - .5em);
  left: 5px;
  line-height: 100%;
}
.text {
  display: table-cell;
  float: right;
  height: 100%;
  width: 50%;
  padding: 0 5px;
  border: 0 none transparent;
  border-left: 1px solid green;
  border-bottom: 1px solid red;
  font-size: inherit;
}

<main class="table">
  <header class="caption">HEADER</header>
  <section class="row">
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
  </section>
  <section class="row">
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
    <label class="cell">
      <div>LABEL</div>
      <input class="text" value="TEXT">
    </label>
  </section>
</main>

How to personalize cell and border spacing within the <table> HTML element

Answer №1

Answer №2

Similar questions

What is the best way to make my text scroll horizontally if the container is not wide enough?

``There seems to be an issue with implementing the SlideDown feature in JavaScript

Utilizing jQuery to dynamically pass parameters to the YouTube API

Responsive design for iPad and larger screens - adjusting to different screen sizes

Show two choices in a select box next to each other

Guide to periodically updating and displaying a <b-img> element in VueJS

HTML Email Clickable Box

Positioning div at the top of the body section

Tips for verifying that one of the two input fields is filled in Bootstrap 5 validation

Obtaining Text within <span>Tag</span> with Selenium in C#

Is there a way to save individual rows in my MySQL Database for each new line entered in a text area form?

Files are nowhere to be found when setting up an angular project

Steps to create a hover effect that alters the appearance of another chosen "element"

React app (storybook) experiencing loading issues with @font-face

Troubleshooting Problems with Owl Carousel Loading

Jquery script to update the background of the parent element when Bootstrap Tabs

The event.target.x attribute on the <i /> tag element

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

jsoup - locate element and delete it along with the element preceding it

What is the method for implementing two-way binding on a checkbox in Angular?