Use the CSS display: table-row and display: table-cell properties

Use the CSS display: table-row and display: table-cell properties

Use the CSS display: table-row and display: table-cell properties : Multi-thousand tips to make your life easier.

Tables in web content are a very convenient and efficient way of displaying a lot of material in a small amount of space. Tables are also easier to read and the relationships per item can be easily seen. Tables are also used for leveled display of pictures and text, and if you want to learn how to use tables when you are editing a file in CSS, then this is the article for you. While other developers would actually prefer table-less implementations (since it is faster to load in some cases), easy maintenance is one of the perks of having items in tables.

• Looking at table-less CSS code. For one to know where to insert tables, here is an example of a piece of CSS formatting that does not use tables, but uses divs instead.
  
  

  
  Sidebar1 content
  

  
  

  
  Main content here
  

  
  

  Cell 1

  
  

  Cell 2

  
  

  
  

  In the example above you can see that you are assigning values to contents of a row. There are actually two nested divs – a div within a div in the example above – and to convert it into a table, it would mean having two tables as the end result.

• Converting divs to tables. When you want to convert the above listed code to be using tables instead of divs, then it should start to look like this:

  #sidebar1 {
  display: table-cell;
  width: 200px;
  background: #FFFFFF;
  padding: 15px 10px 15px 20px;
  }
  #mainContent {
      display: table-cell;
      padding-left: 10px;
  }
  .row {
  display: table-row;
  }
  .cell {
  display: table-cell;
  width: 400px;
  height: 200px;
  border: 1px solid blue;
  }

  If you are not sure of what colors you are going to use for the background and other content elements, you can just input them later on since the tables are there to basically form a layout and not really the design of the page. What will be displayed when you review this HTML file is that you will have two tables displayed somewhat like a grid. Developers prefer table displays in CSS simply because it is much easier to understand from the code alone where you will be placing the images and where you can change the value of the background color and the like.

• Editing the placement of the sidebar. In the past two examples, the sidebar comes first, meaning that it will appear on the left part of the screen. If you want it on the right portion of your screen then just place it after the main content, still as a sidebar, and it should be placed accordingly.

There are many other tips on how to manipulate displays in CSS but this is one of the more basic ones. There is an ongoing debate on what is more efficient in terms of displaying information and there are two main schools of thought – those preferring to use divs and those preferring to use tables. Just one last note – table displays are not supported by Internet Explorer version 8 so if this browser is very high up on your priority list then you might want to continue with the div implementation instead.