Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Complete CSS Display Table Guide: Creative Uses and More

The display property in CSS is one of the most important properties to learn and make use of as it helps handle the layout of an element and also determine how an element should look. Furthermore, It also helps in styling HTML elements and making them look presentable on the web page. Including using CSS display table for beautiful tables.

In this article, I will walk you through all you need to know about the display property in CSS and how to make use of it in styling HTML elements.

Let’s dive right in 🚀

Overview of the display property

The CSS display property controls the layout behavior of an element detecting if an element behaves like a block, inline, flex, grid, etc. However, it determines how elements are displayed and how these elements interact with each other on a webpage.

The CSS display property plays a vital role ensuring that elements are properly placed on a webpage. Some of the importance of the CSS display property include;

  • It helps control layouts

  • It provides the ability to make an element visible and also to hide an element.

  • It aids in the structural organization of elements

  • It provides the ability to create responsive designs for different screen sizes.

Image source – medium.com

Basic display Property Syntax

To add the CSS display property to an HTML element, you can do this by writing display and then assigning the particular property of your choice. Here is an example;

<div class="SameLine">
  <p>
    Complete Guide to CSS Display: Creative Uses for CSS Display Table
  </p>

  <p>
    Furthermore, It also helps in styling HTML elements and making them look presentable on the web page.
  </p>
</div>

CSS styling;

.p {
  font-size: 40px;
  display: inline;
}

The example above shows how to add the CSS display syntax to an element.

Display Property Values in CSS

The default value of a display property is block or inline, depending on the element.

The inline CSS display property is used in placing elements in the same line (they do not start on a new line). On the other hand, the block property is used to place elements on different lines.

The display property takes various values which include; inline, block, inline-block, none, and table.

Some other display values include;

* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row;
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

If you want to skip the hard part of CSS styling and not worry about coding, rather focus on the business logic of your web project, then, consider using Purecode.ai AI-generated custom components for your web applications.

Creative Uses of the display Property Values

display: inline

The display: inline property places an element on the same line and it will take up the available screen width.

Because of this, you can use the display: inline to convert a block-level element (elements on different lines) into an inline element.

Moreover, some HTML elements by default have inline properties by default. Elements like a, span, button, etc.

Here is an example of how to use the display: inline property;

<!--index.html-->
<body>
    <p class="red">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi eum dolore et ut neque iure repellendus, pariatur hic amet! Eos, nulla! Deleniti facilis laudantium ex dignissimos quibusdam voluptate beatae quod?
    </p>
    <p class="blue">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi eum dolore et ut neque iure repellendus, pariatur hic amet! Eos, nulla! Deleniti facilis laudantium ex dignissimos quibusdam voluptate beatae quod?
    </p>
    <p class="yellow">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi eum dolore et ut neque iure repellendus, pariatur hic amet! Eos, nulla! Deleniti facilis laudantium ex dignissimos quibusdam voluptate beatae quod?
    </p>
</body>

CSS styling;

p {
  display: inline;
}
.red {
  background-color: #ff0000;
  color: #fff;
}

.blue {
  background-color: #0000ff;
  color: #fff;
}

.yellow {
  background-color:#ffff00;
}

From the code above, you can see clearly how to use the display: inline. The p element being a block element is converted to an inline element.

Display inline property

Some of the few limitations of the display: inline property is;

  • inline elements cannot contain block-level elements i.e. if you try to add a block element inside an inline element it might not work.

  • Using an inline element, you cannot specify the width and height because the contents just take up the space required by their content.

display: block

When you declare a display: block to an element, it places each content of different pages.

Just as you can convert a block element into an inline element, you can also convert an inline element into a block element and you can also specify the width and height of each element.

HTML elements like div, p, ul etc have the block property by default.

Some limitations to the display: block are as follows;

  • Because block-level elements stack on top of each other, it makes it difficult to place elements along each other when the need arises.

  • Block-level elements come with a default margin, padding, and border which might cause some complications to the layout designs.

Here is an example of how to use the display: block property;

<body>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Menu</a>
    <a href="#">Company</a>
    <a href="#">Team</a>
</body>

CSS style;

  a {
    display: block;
    font-size: 20px;
  }

Anchor (a) tag is an inline-level element and from the example above, you can convert an inline-level element into a block-level element by applying display: block to the specified tag.

Display block property

display: inline-block

Just as the name implies, the inline-block property acts as an inline element and at the same time a block element.

The display: inline-block property displays an element as an inline-level block container. This property places an element as an inline element, but you can now control the width and height of elements. It is therefore two packages in one.

Some of the advantages of this property include;

  • it combines the features of both inline and block elements. i.e. it formats an element as an inline element while also being able to apply widths, height, etc.

  • it is helpful for responsive design in cases where elements need to be placed in the same line with other elements and their sizes resized.

Example;

<!--index.html-->
<body>
    <p class="red">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi eum dolore et ut neque iure repellendus, pariatur hic amet! Eos, nulla! Deleniti facilis laudantium ex dignissimos quibusdam voluptate beatae quod?
    </p>
    <p class="blue">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi eum dolore et ut neque iure repellendus, pariatur hic amet! Eos, nulla! Deleniti facilis laudantium ex dignissimos quibusdam voluptate beatae quod?
    </p>

CSS style,

p {
  font-size: 30px;
  display:inline-block;
  width: 300px;
  height: 400px;
}
.red {
  background-color: #ff0000;
  color: #fff;
}
.blue {
  background-color: #0000ff;
  color: #fff;
}

The example above shows clearly how to add the display: inline-block property to an element. With this property, we can assign a height and width to an HTML element.

Display inline-block property

display: none

The display: none property is another type of CSS display property that removes a targeted element entirely from a page and makes it look as if it never existed in the first place.

This property is usually confused with that of the visibility: hidden but they are different from each other.

When you use the display: none property, it removes the targeted element and does not leave any space where the element was removed from. The same does not apply to the visibility: hidden property because leaves the space it would normally take empty.

Using the display: none property has a great impact on accessibility tools as any element that has this property cannot be seen or read by any accessibility tool.

Example;

<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro commodi voluptatum, necessitatibus, accusamus cupiditate, soluta repellat eaque dolorum sit perspiciatis ipsum? Natus quo, repellat alias rerum doloribus debitis temporibus, velit eveniet quos
    <span>adipisci molestias! Illo, nemo quisquam explicabo maiores excepturi voluptatibus iste libero dolorem esse quibusdam voluptatem temporibus omnis neque ullam unde nisi autem labore corrupti similique earum eius voluptas. Facere unde doloribus dolorem?
    </span> Minima obcaecati dignissimos provident accusamus magni praesentium nihil atque, ullam exercitationem perspiciatis quas necessitatibus quia eius deleniti tempora corrupti saepe beatae facere quidem? Soluta ut eos deserunt, illo similique labore beatae, praesentium sit id totam at?
  </p>
</body>

CSS style;

p {
  font-size: 16px;
  width: 80%;
  text-align: center;
}

span {
  display: none;
}

Display none property

From the example above, the display: none property removed the span element entirely making it look as if it never existed in the text unlike that of visibility: hidden.

Example of visibility: hidden;

<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro commodi voluptatum, necessitatibus, accusamus cupiditate, soluta repellat eaque dolorum sit perspiciatis ipsum? Natus quo, repellat alias rerum doloribus debitis temporibus, velit eveniet quos
    <span>adipisci molestias! Illo, nemo quisquam explicabo maiores excepturi voluptatibus iste libero dolorem esse quibusdam voluptatem temporibus omnis neque ullam unde nisi autem labore corrupti similique earum eius voluptas. Facere unde doloribus dolorem?
    </span> Minima obcaecati dignissimos provident accusamus magni praesentium nihil atque, ullam exercitationem perspiciatis quas necessitatibus quia eius deleniti tempora corrupti saepe beatae facere quidem? Soluta ut eos deserunt, illo similique labore beatae, praesentium sit id totam at?
  </p>
</body>

CSS style;

p {
  font-size: 16px;
  width: 80%;
  text-align: center;
}

span {
  visibility: hidden;
}

Visibiltiy: hidden property

display: table

Before the invention of floats, flex, and grid properties, the display: table property was more useful because it allowed you to create table-like layouts using HTML elements without having to use the <table> tag.

This property comes in handy in cases when designing responsive tabular-like structures that adjust based on screen size without affecting the whole layout or design.

Example;

<body>
    <div>
      <div class="table">
        <div class="row">
          <div class="column">S/n</div>
          <div class="column">Name</div>
          <div class="column">Gender</div>
          <div class="column">Nationality</div>
        </div>
        <div class="row">
          <div class="column">1</div>
          <div class="column">Emmanuel</div>
          <div class="column">Male</div>
          <div class="column">Indian</div>
        </div>
        <div class="row">
          <div class="column">2</div>
          <div class="column">Franklin</div>
          <div class="column">Female</div>
          <div class="column">France</div>
        </div>

      <!-- You can add more table elements... -->
      </div>
    </div>
</body>

CSS styling;

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.column {
  display: table-cell;
}

The code above shows how you can implement the display: table property. In the CSS file, the display: table-row, targets the child element of the container (.row) and converts it into a row. While display: table-cell converts the .column element into table cells.

Display table property

You can make your table look more appealing by adding margins, paddings, and borders where needed to the table cell. For Example;

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
}

.column {
  display: table-cell;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ffff;
}

An appealing and responsive table

Exploring Advanced Display Values

Some other display values are important to take note of due to their relevance and impact on the overall appearance of the webpage.

Even though you practically utilize some of these display values, you are unaware that they are a part of the display property.

Let’s look at them.

display: flex

The display: flex is a newer but powerful option of the CSS Display property used for creating flexible layouts. It provides an easy way to position elements in a layout.

To implement the flex property in your code, you need to apply display: flex on the parent container element.

This display property works along with the justification and alignment properties such as justify-content, align-items, align-self, align-content, etc. to arrange elements properly along the horizontal and vertical axis of the web page.

When you use the display property of flex on your container (parent element), it places each child element within the parent element side by side with each other.

Example;

<div class="container">
  <div class="red">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem modi, maxime in quae adipisci obcaecati consectetur accusamus ullam perferendis minus.</div>

  <div class="yellow">Lorem ipsum dolor sit, table header group amet consectetur  different display values adipisicing elit. Autem modi, maxime in quae adipisci obcaecati consectetur accusamus ullam perferendis minus.</div>

  <div class="blue">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem modi, maxime in quae adipisci obcaecati consectetur accusamus ullam perferendis minus.</div>
     <!-- You can add more -->
    </div>
</body>

CSS Style;

.container{
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.red {
  background-color: #ff0000;
  color: #fff;
  margin: 10px;
  padding: 5px;
}

.blue {
  background-color: #0000ff;
  color: #fff;
  margin: 10px;
  padding: 5px;
}

.yellow {
  background-color: #fff000;
  padding: 5px;
}

Display flex property

By adding a flex-direction and a value to the container element, you can alter the flow direction of the child element on the web page. Some of these flex directions are; row, column, column-reverse, row-reverse, etc.

Example;

/* Using the previous html file */
.container{
  display: flex;
  flex-direction: column;
  padding: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

You can see that from the code above, the flex-direction is set to column. This in turn alters the direction of the content and converts it to a column.

Display flex (flex-direction) property

If you wish to learn more about the CSS display: flex property, I have added a YouTube video below;

display: grid

This is another powerful CSS property that aids in the creation of complex and responsive web layouts.

The grid property is a more advanced form of flex as it enables you to create a grid layout within a container element, dividing the available space into fragments of columns and rows.

To implement the grid property in your code, you need to apply display: grid on the parent container element.

To extensively control the layout structure and appearance of an element when using the grid property, you use properties like grid-template-columns, grid-template-rows, grid-gap, etc.

Example; If you want to create a grid layout that has four columns and two rows, here is how to get it done.

<body>
  <div class="container">
    <div class="red"> Item 1</div>
    <div class="blue">Item 2</div>
    <div class="yellow">Item 3</div>
    <div class="red">Item 4</div>
    <div class="blue">Item 5</div>
    <div class="yellow">Item 6</div>
    <div class="red">Item 6</div>
    <div class="blue">Item 6</div>
  </div>
</body>

CSS style;

.container{
  display: grid;
  grid-template-columns: 1fr 1fr ;
  gap: 10px;
}

.red {
  background-color: #ff0000;
  color: #fff;
  padding: 20px;
}

.blue {
  background-color: #0000ff;
  color: #fff;
  padding: 20px;
}

.yellow {
  background-color: #fff000;
  padding: 20px;
}

Display grid property

display: inherit

This display attribute causes an element to inherit the properties of its container (parent) element. Therefore, if you set the display attribute of inherit to an inline-level element that is included within a block-level element, it instantly becomes a block-level element.

Example;

<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro commodi voluptatum, necessitatibus, accusamus cupiditate, soluta repellat eaque dolorum sit perspiciatis ipsum? <a href="#"> Natus quo, repellat alias rerum</a> doloribus debitis temporibus, velit eveniet quos
    dignissimos provident accusamus magni praesentium nihil atque, ullam exercitationem perspiciatis quas
  </div>
</body>

CSS style;

a {
  display: inherit;
  background-color: #808080;
  color: #ffff;
  text-decoration: none;
}

Display inherit property

display: initial

This display property sets an element to its original/default value without altering its layout. This means that if an element is an inline-level element, it remains an inline-level element even after giving it the property of display: initial same goes with block-level elements.

Example;

/* Using the previous html file*/
a {
  display: initial;
  background-color: #808080;
  color: #ffff;
  text-decoration: none;
}

Display initial property

In case you still want to expand your knowledge on CSS display property, I encourage you to check this video below:

Your Next Steps

In this article, you have learned about the CSS display properties ranging from inline, block, and inline-block down to the advanced CSS display property flex, grid, etc.

The display property in CSS is one of the most important properties to learn and make use of as it helps handle the layout of an element and also determine how an element should look.

Additionally, you can use the display: table attribute to construct a table and organize it so that they have the same appearance as when you use the <table> tag.

By creating grid and flex, CSS has made the development of complex and responsive web pages easier and more fun for developers.

Mastering the display CSS property can significantly enhance your web design skills, allowing you to create visually stunning and user-friendly websites. However, creating custom CSS components can be time-consuming. That’s where Purecode.ai comes in. Purecode.ai is a marketplace library boasting a collection of over 10,000 custom AI-generated components of Tailwind CSS, CSS3, and MUI. It’s designed to help you design quickly and efficiently, providing you with a vast array of components to choose from.

Whether you’re looking to implement a backdrop-filter effect or any other CSS property, Purecode.ai has got you covered. So why wait? Start designing with Purecode.ai today and take your web development projects to the next level!

Happy coding 💻

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.