0

I am coding for the homepage of a website. Shall I use tables or div for partitioning the homepage into sub-sections.

Can anyone clear my doubt that if partitioning is done with tables, it might not work well in mobile or tab devices??

Indu Bhusan Nath
  • 109
  • 5

3 Answers3

0

Use <div> instead of tables. Different browsers have different approach for plotting <table>s in web pages, but for <div>, there is a common standard. I strongly suggest you to stick with <div>s.

In addition to that, the two top reasons for using Divs instead of Tables are

  1. Divs fill whatever horizontal space is available and
  2. they require less code. Less code equals smaller files which equals faster load times.

The ability of a Div to fill the space is just a nice feature to have - especially when working with fluid layouts.

You may refer to these articles:

Which is better, div or table?

Why I think divs are better than tables

halfer
  • 19,824
  • 17
  • 99
  • 186
Alfred
  • 21,058
  • 61
  • 167
  • 249
0

I recommend you to use bootstrap for this. You will spend maximum 2 days to learn it. Here is link

And using div is better, than tables. You should use it with well formed css, and you page's will be really nice.

Khazratbek
  • 1,656
  • 2
  • 10
  • 17
0

Tables

Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality. Semantically speaking, the table tag is meant for listing tabular data. It is not optimized to build structure.

Ease of use

Using tables to build structure is quite intuitive. We see tabular data every day, and the concept is well known.

Also, tables don’t break when the content is too wide. Columns are not squeezed under other columns as they are in a div-based structure. This adds to the feeling that using tables is safe.

Maintainability

Table contains different tags: the table tag being the wrapper, tr for each row and td for each cell. The thead and tbody tags are not used for structural purposes because they add semantic meaning to the content. For readability, each tag is normally given its own line of code, with indention. With all of these tags for the table, several extra lines of code are added to content. The colspan and rowspan attributes make the code even more complex, and any developer maintaining that page in future has to go through a lot of code to understand its structure.

Divs

The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages. The div tag is also used to describe content that cannot be properly described by other more semantic tags.

Ease of Use

The div element isn’t visual like the table element. Everyone knows what a table looks like, but divs are not as obvious. The good thing about a div, though, is that it’s only one element. It’s not wrapped in a parent element the way td tags are in tables. The container, then, is more flexible and doesn’t have the limitations of its parent tag.

Using a div for structure can make a page more fragile when content is pushing the div to its limit. It can also force columns to fall under each other. But this is usually only true for older browsers (particularly IE6); newer browsers make content flow to the next column.

Maintainability

The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content. The div tag is for logical groupings of elements.

Nesting div should be used with descriptive class and structure names makes the code more understandable.

Divs should be used when semantic block-level tags would better describe the content; for instance, headings should be wrapped in h1 to h5 tags. Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away.

Flexibility with Media

Div-based structure is more flexible in supporting different media than a table-based structure. Not having to maintain separate pages for each media saves maintenance and development costs. A div-based structure allows you to move columns around and even hide columns using display: none in the style sheet.

Senjuti Mahapatra
  • 2,570
  • 4
  • 27
  • 38
  • If the width of Div is set to a certain percentage, then will it also fill up all available space?? – Indu Bhusan Nath Jan 08 '16 at 05:41
  • Yes. a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. So in your case, the `div` will fill up completely the percentage of the space that you have set to. – Senjuti Mahapatra Jan 08 '16 at 05:49
  • Another query: I need to do pagination in the homepage. Shall I use php or javascript. Which is better for pagination purposes? – Indu Bhusan Nath Jan 08 '16 at 06:30
  • You can use [jQuery-Pagination Plugin](http://esimakin.github.io/twbs-pagination/). This is very simple to implement – Senjuti Mahapatra Jan 08 '16 at 06:32
  • Thanks. Another query: I am also creating a Content Management System for the website. To upload texts from the backend, I have created a textarea. But, how to make contents in the textarea bold, italics or or some size?? I do not like to use freely available CMS systems like CKEditor. – Indu Bhusan Nath Jan 11 '16 at 07:30
  • @InduBhusanNath: There are multiple answers on this : http://stackoverflow.com/questions/4705848/rendering-html-inside-textarea . Another is http://stackoverflow.com/questions/9274120/how-can-i-display-bold-text-in-a-textarea – Senjuti Mahapatra Jan 11 '16 at 08:52
  • @InduBhusanNath - What I feel is you should ask this question on another thread, as the question that u asked is not relation with the original question – Senjuti Mahapatra Jan 11 '16 at 08:53