<p> vs. inline tables/blocks and floats

stasoid commented 7 years ago

The most natural way to add inline table to a paragraph would be just use <table> with display: inline-table inside a <p>, but this doesn't work as expected in standards mode. Similarly, inline block or a float is naturally represented with a <div>, which cannot be inserted in <p> either.

This is very confusing. Answers at stackoverflow suggest using display: inline for <p> in this situation, which I think is worse than using <div> instead of <p>. http://stackoverflow.com/questions/41187696/how-to-make-table-inline-with-the-p-tag http://stackoverflow.com/questions/7457319/how-do-i-make-an-html-table-inline

Specification already contains a note about <p> containing a list. https://w3c.github.io/html/grouping-content.html#the-p-element I think it should be added how to handle above-mentioned situations as well.

Personally I think authors should be advised to use <div> when paragraph contains inline tables/blocks/etc. or floats. I saw people using <span>s with appropriate display or float for this, but I think it is worse because:

it is confusing - I expect <span> to be a "span of text"
it is brittle - if I add some <div>s inside it'll fall apart

PS. Probably <p> should be obsoleted altogether because it does not function properly - you cannot create arbitrary paragraph of text with it.

soanvig commented 7 years ago

<p> should not contain any table. First of all, I cannot imagine one situation where using table in <p> is logic and necessary. Second thought: table is an element which can be extracted out of page and being properly titled exist by itself. That way, placing it inside paragraph kind of messes the structure.

Maybe You just are using your table wrong? I mean, can You give an example of tabular data which You require to be inline inside paragraph? Because I have never seen the use of table inside paragraph (in any of Polish publications at least).

AndySky21 commented 7 years ago

I completely agree with the last comment. Tables inside paragraphs are of no use at all, as they can themselves contain flow (not inline) elements. This would break the content model I guess

As a side note, I hope that obsoleting

was meant to be a joke...

stasoid commented 7 years ago

@soanvig

<!doctype html>
<style>
table {
    float:right;
    margin-left: 3px;
    border: 1px solid black;
    border-collapse:collapse;
}
td { padding: 0px 5px; font-size:smaller; }
</style>

<div style="width:800px">

Here comes paragraph that describes some aspect of crime in America, and to illustrate the point it contains a floated table.
Data from https://www.fbi.gov/news/stories/latest-crime-statistics-released.
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
<table>
<tr><td>Motor vehicle theft<td>8.9%
<tr><td>Burglary<td>19.8%
<tr><td>Larceny theft<td>71.4%
</table>
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.

</div>

AndySky21 commented 7 years ago

This is not an inline table. This table is part of the same section/article and graphically floats on the right side of it.

This table is no more inline than a floating figure / details / fieldset element. And note that none of them can be included in a P element.

chaals commented 7 years ago

I think the legacy around p means we would be unable to change this if we wanted to. And I don't actually see much reason to make the change.

stasoid commented 7 years ago

@chaals Thank you for your response. I do not propose to change behavior of <p> element. I propose only to add clarification of its usage. Literally, just to add at the end of green section starting with "List elements" in paragraph 4.4.1 this text: "The same applies to inline blocks, inline tables, floated and positioned block-level elements." (I know it is wrong to use "block-level" like that, but you know what I mean)

WaveRunning commented 7 years ago

who are you ?

At 2017-03-01 11:56:58, "stasoid" notifications@github.com wrote:

@chaals Thank you for your response. I do not propose to change behavior of

element. I propose only to add clarification of its usage. Literally, just to add at the end of green section starting with "List elements" in paragraph 4.4.1 this text: "The same applies to inline blocks, inline tables, floated and positioned block-level elements." (I know it is wrong to use "block-level" like that, but you know what I mean)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

chharvey commented 7 years ago

@stasoid you can use CSS to achieve the wrapping effect shown in your screenshot, without changing the semantics of <p>.

https://www.html5rocks.com/en/tutorials/shapes/getting-started/

w3c / html

<p> vs. inline tables/blocks and floats #763