css display:table vs html <table>, Which is more appropriate to use?_问答_开发者

css display:table vs html <table>, Which is more appropriate to use?

开发者 https://www.devze.com 2023-03-02 09:13 出处：网络

When I do web layout, I am using html <table>. However, I read on the internet that html tables should only be used in data and should use <div> or <span> when doing layout. I search

When I do web layout, I am using html <table>. However, I read on the internet that html tables should only be used in data and should use <div> or <span> when doing layout. I searched on the internet and found about display: table . I read a开发者_运维技巧bout it and in my own understanding (I don't know if I understood it right) it is the same as html <table>. I find it easier to use html <table> because its way much simpler. I don't have to worry about positioning the <div> because most of the time it goes to the spot where I did not intend to.

My question is: what are the pros and cons or disadvantages of using html <table> in layouting?

There's not a whole lot of advantages to using table markup for page layout other than for someone that doesn't want to learn proper HTML/CSS and/or is using some sort of WYSIWYG editor.

You definitely want to use tables for tabular data, however, as there are a lot of good accessibility reasons.

The advantages of CSS for page layout (over tables) is:

presentation is separated from content (which often means less HTML to deal with)
presentation is more flexible when updating
presentation is a lot easier to tailor to various devices/screens

The css display property of 'table' allows your your CSS to act more like a traditional table. This gives you the benefits of CSS, but lets you use your older table logic.

If you are well versed in CSS, about the only time you'd really want to leverage display: table is when you run into situations where you want to handle vertical centering of content...something that CSS in general seems to fail at. Do note that display: table, like a lot of CSS, does not work in older versions of IE.

It all depends on what you're trying to accomplish. using divs, spans, and display:table can get quite messy, but if you're afraid Search Engines won't navigate a normal table right, it might be the way to go. using the table tag is much simpler, easy to use, and more semantically correct.