Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Some people think both HTML <table>s and display:table should be used for tabular data exclusively.
I instead think that display:table doesn't have any implicit semantic meaning and that it can be used for layout / presentational purposes, as well as for displaying tabular data.
Is there anything wrong with using display:table for layout purposes? If so can you provide more details?
References to specifications etc. are welcome.
Yes. Markup is markup (and HTML is markup designed to convey semantics). Presentation is presentation.
When I need a shrink-to-fit block element that allows me to vertically center content, then I will use display: table and display: table-cell as needed.
I will not use a <table> to create a page size grid. Instead I will use a CSS framework like Twitter Bootstrap.
However, I will use a one-row/one-cell table is I need it to fix a centering problem that needs to work in older IE browsers that do not support CSS tables.
As a professional developer, I need to get the job done in a timely fashion and sometimes I will add extra mark-up if that what it takes to get the task finished.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
Is it good practice to use CSS display: grid instead of the html tag <table>?
There are many times when <table> in responsive design is difficult to use. Especially for complex shop basket tables and handling colspan etc. However with css-grid it's an easy one.
I see some problems in styling rows like <tr> for table. There are ways with nth-child stuff. What do you think about it?
If you know CSS grid and are comfortable using it, there is no good reason not to use it. Support is good enough CSS grid support at this point
In fact I highly recommend using anything over <table> for layout. Tables should be used for tables with data in it. Flexbox is also a great option depending on the situation. Ideally you would know when CSS grid is appropriate and when flexbox is, or when both can be used in tangent.
In conclusion it is 2018 and tables should be used as little as possible for this purpose. Move towards the future with flexbox and CSS grid.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Which approach is preferable for creating a grid - flexbox, css-table or inline-block?
Or may be each of this technics should be used in specified cases?
If so, in what cases should be they used?
each has benefits and disadvantages.
Flexbox is very useful in many cases, but some browsers still lacks the features.
Tables may sound oldskool, but if you are coding an html mailing, it is still the best way.
I think before starting a project, you should check other projects and search on google what is best for you scope.
Flexbox is becoming the most popular among web developers these days. Websites have been able to get much more responsive on different screen sizes over the last few years which is why using flexboxes is the most popular at this point. It is finally supported on all of the main browsers and provides a good interface for building anything.
Using inline-blocks is still useful however, in different parts of a website, usually with less elements or only two columns, such as a image or an icon next to a body of text.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am migrating my small business website to use bootstrap in order to be mobile friendly. I am still getting to know the bootstrap framework and I am not an expert in css either...
My question is a conceptual one. Today with my old website, using html and css, I define in my css both the size (yes, fixed sizes) and styles (colour, etc.) of the divs I use.
On the other hand, in all the examples I've seen of bootstrap, in the css one can only define the style of the divs, while the size is defined in the html when choosing the bootstrap column's size (e.g. col-sm-4). [Note: I am following the approach of having two css, bootstrap's and my custom one.]
The way I see it, I am losing the capacity to define the size of the divs centrally from the css and hence losing maintainability. Also, the site will be harder to develop since the col-sm-* classes are semantically poor. Is this correct? Am I missing something here?
Is there a way to define css classes that reference the bootstrap classes? e.g. To define a .menu css class that can behave as .col-sm-4.
Any suggestion or recommendation is welcome.
Thanks in advance
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm using src img to place a logo in the header section. What would the pros and cons be of placing the image in a < div > vs leaving it as a plain ol' img src?
I'm thinking that, for the most part, I should be able to apply the same properties (such as margin, class, ID, etc.) to both. Am I missing something?
Note: I'm not interested in a background-image since I consider the logo content.
tl;dr wrapping is always good thing, if you are going to maintain that code for long enough time.
because you can created very targeted css, show, hide could be easier, round corners and adding text for accessibility will be easier etc..
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
From my knowledge, there are 2 primary ways to insert images into HTMl.
You can either use the traditional image tag and add the image via the "src" attribute.
Or you can add the image as a background-image to a div tag via the background-image property.
Can someone explain some of the pros and cons of using either of these approaches? When would you use one or the other?
If your images are for designing reasons, your best of placing them as background. But when your images are part of your content, for example your website logo, or some illustration as an explanation to your text, you put it in with an img tag.
I would say use css to insert background images. From my experience it's more efficient and easier to read if you can keep all attributes of a div in one language. You can then edit them without switching screens in your editor, unless you plan to add some kind of user interface (javascript, jquery, etc.)