CODEWITHSUNDEEP
htmlcss
Unbreakable
Unbreakable

Reputation: 8112

How to make table inline with the p tag

I am stuck at one place where I need to make a table inline with the p tag but I am not able to do so. I want to do minimalist change in my HTML Style. Below is what I have tried

<p>ABCD</p>
<table style = display: inline;>
   <tbody>
      <tr>
         <td>State&nbsp;</td>
         <td>Capital&nbsp;</td>
         <td>Zip&nbsp;</td>
      </tr>
      <tr>
         <td>New Yrk&nbsp;</td>
         <td>Alba ny&nbsp;</td>
         <td>13210&nbsp;</td>
      </tr>
   </tbody>
</table>

Link: https://jsfiddle.net/h5bbs0oy/

Upvotes: 2

Views: 3103

Answers (4)

Amit kumar
Amit kumar

Reputation: 278

Making both display:inline works, but it will good if you only make p tag float:left . No need to add display:inline on any of one, Also adding display:inline, you will not be able to add top and bottom padding or margin.

Upvotes: 0

Amir Mustafa
Amir Mustafa

Reputation: 13

If you want to make table inline using inline CSS Method, just follow this method:

<table style="display: inline">
  <tbody>
    <tr>
      <td>State&nbsp;</td>
      <td>Capital&nbsp;</td>
      <td>Zip&nbsp;</td>
    </tr>
    <tr>
      <td>New Yrk&nbsp;</td>
      <td>Alba ny&nbsp;</td>
      <td>13210&nbsp;</td>
    </tr>
  </tbody>
</table>

The quotes in inline css was missing

Upvotes: -1

Prathap
Prathap

Reputation: 178

If you are looking at making both the paragraph and table inline, then have the display: inline on both the tags.

<p style="display: inline">ABCD</p>
<table style="display: inline">...

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

You have a few issues:

  1. You cannot have spaces inside the attributes, if you aren't enclosing them inside quotes.
  2. You need to make the <p> inline as well.

Solution

<p style="display: inline;">ABCD</p>
<table style="display: inline;">

Snippet

<p style="display: inline;">ABCD</p>
<table style="display: inline;">
  <tbody>
    <tr>
      <td>State&nbsp;</td>
      <td>Capital&nbsp;</td>
      <td>Zip&nbsp;</td>
    </tr>
    <tr>
      <td>New Yrk&nbsp;</td>
      <td>Alba ny&nbsp;</td>
      <td>13210&nbsp;</td>
    </tr>
  </tbody>
</table>

Preview

preview

Upvotes: 2

Related Questions