Html Question posted in
Some basic documentation can be found here.

Html – Display a table inline with <p> text

I am trying to display a table inline within a p element. The result should look similar to this:

             *-----------------*
Text before. | Cell 1 | Cell 2 | Text after.
             *-----------------*

As shown, the table needs to be centered vertically with the text. The table might have multiple rows.

The following works (I am using inline css in this example to simplify the post):

<html lang="en">
<head>
</head>
<body>
    <p>
        Text before.
        <table style="display: inline-block; vertical-align: middle;">
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
        </table>
        Text after.
    </p>
</body>
</html>

HOWEVER, if I add <!DOCTYPE html> to the top of the file, the table appears below the "Text before."

There must be a difference between quirks mode (when the doc type isn’t specified) and when the doc type is specified, but I don’t know how to resolve it.

Thanks!

Tags:

3

Answers


  1. 0

    The difference between when no<!DOCTYPE html>is present and when<!DOCTYPE html> is present. In quirks mode, browsers attempt to mimic the behavior of older versions of HTML, leading to differences in rendering.

    <!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <p style="line-height: 1;">
        Text before.
        <table style="display: inline-block; vertical-align: middle;">
            <tr><td>Cell 1</td><td>Cell 2</td></tr>
        </table>
        Text after.
    </p>
</body>
</html>

    This keeps the table vertically centered with the text.

    Login or Signup to reply.
  2. 0

    Frankly, a table is not indicated here. An inline-grid container would be ideal.

    Rows aren’t necessary here but I’ve included them for clarity but it does require subgrid for optimisation.

    p {
  outline: 1px solid grey;
  display: flex;
  align-items: center;
}

.grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25em;
  outline: 1px solid red;
  background: lightblue;
}

span .row {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}
    <p>
  Text before.
  <span class="grid">
    <span class="row">
      <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  </span>
  <span class="row">
      <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  </span>
  <span class="row">
      <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  </span>
  <span class="row">
      <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  </span>
  <span class="row">
      <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  </span>
  </span>
  Text after.
</p>

    BUT, as I said, rows aren’t really required…

    p {
  outline: 1px solid grey;
  display: flex;
  align-items: center;
}

.grid {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25em;
  outline: 1px solid red;
  background: lightblue;
}
    <p>
  Text before.
  <span class="grid">
  <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  <span class="cell">Cell 1</span>
  <span class="cell">Cell 2</span>
  </span>
  Text after.
</p>
    Login or Signup to reply.
  3. 0

    You can achieve the same, but need a bit of more css with it. And I think we need to replace the <p> with a <div> tag.

    .inline-container {
  display: inline-block;
  /* Keeps the container inline */
  vertical-align: middle;
  /* Aligns vertically to the middle */
}

table {
  display: inline-table;
  /* Makes the table display inline */
  vertical-align: middle;
  /* Aligns the table in the middle of the line */
  margin: 0 5px;
  /* Optional: Adds spacing around the table */
}
    <!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="inline-container">
    Text before
    <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
    </table>
    Text after
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search