Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code 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/

htmlcss

Answer №1

You seem to be encountering a few issues:

  1. Avoid including spaces within the attributes unless they are enclosed in quotes.
  2. Ensure that the <p> tag is inline as well.

Possible 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

https://i.sstatic.net/ujue0.png

Answer №2

To ensure that both the paragraph and table are displayed inline, you can set the display: inline property for both elements.

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

Answer №3

Setting the p tag to float:left while leaving the other element with display:inline can achieve the desired layout. This approach allows for the addition of top and bottom padding or margin without any limitations. It is recommended to avoid adding display:inline to both elements to maintain flexibility in styling.

Answer №4

To create an inline table using inline CSS Method, you can use the following technique:

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

The quotation marks in the inline CSS code were missing

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

jquerycssbuttonapply

Link a function to a button in a 3rd party library

Whenever I click a button, there is a possibility of an alertify alert window appearing randomly. The alertify alert popup serves as a more aesthetically pleasing alternative to the traditional javascript Alert. Alertify library Below is a snapshot depic ...

javascriptjqueryhtmlalertalertify

Displaying items in the shopping cart across two separate columns

I have a website located at Within that page, I have included the Cart table using a woocommerce shortcode. Currently, the cart table is positioned below the billing details and payment options section. My goal is to move this cart table to be situated ...

csswordpresswoocommercecheckout

Avoid constantly destroying the Bootstrap Popover

I am facing a challenge with retrieving data from two checkbox inputs inside a popover. The issue arises because the popover appears in the DOM when I click a button, but is removed when I click it again. It seems that the problem lies in the fact that Jav ...

javascriptjqueryhtmlangularjstwitter-bootstrap

REST and using a passed authentication token

As I embark on my first journey into REST programming, I find myself grappling with the challenge of passing the session token. Despite scouring various forums for similar issues, I have yet to find a solution. Here is a snippet of Ruby code that I am cur ...

htmlrubyjsonrest

In JavaScript, unchecking a radio button results in all options becoming uncheckable

I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...

javascriptcssradio-buttonaccordion

Clicking on components that are stacked on top of each

I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...

cssreactjsreact-nativematerial-ui

What is the best way to create inline-block elements that stretch the entire width of their container?

How can the input field and button behavior be optimized for this specific display: ...

htmlblockcss

Altering the appearance of a component that is currently selected and in use

Currently, I have incorporated a component with its selector within another component as shown below: <div class="col-xl-4" style="margin-bottom: 30px;"> <app-patient-info-accordion *ngIf="patient" [cardTitle]=&qu ...

htmlcssangularangular-components

ms-card malfunctioning due to data issues

I'm facing difficulties in transferring the data to the template. Although I can access the data in HTML using vm.maquinas and maquina, I am unable to pass it to the TEMPLATE through ng-model. Information about ms-cards was not abundant. Module ang ...

javascripthtmlangularjsframeworksangular-material

Unable to resize static and draggable elements simultaneously

Observe this fiddle to see the demonstration: DEMO If you are interested in the resizing of white divs, check out this link: Resizing of White divs The draggable divs are represented by red while the static divs are shown in white and located in droppabl ...

javascriptjqueryhtmlcssjquery-ui

Update the color of a span in JQuery when its value equals 0

Currently, my goal is to update the color of a span tag only if its value is 0. I attempted to achieve this with the following code: $('span.number:contains("0")').css('color', '#C1C1C1'); However, this code also changes the ...

jquerycssclasscolorshtml

Collapsing one tab when another is selected in the accordion interface

I have successfully implemented an accordion feature, but I am facing an issue where the tabs do not close when another one is clicked. Currently, they only open but fail to close the previously opened tab... Below is the code snippet for reference: < ...

jqueryhtmlaccordion

Include content within the navigation bar of Bootstrap 3.3

I am trying to insert text at the end of the header in a jumbotron template: <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text ...

csstwitter-bootstrap

How can I create a webpage that is fully responsive to both width and height, with text that automatically scales to fit the

I am currently using Bootstrap and Angular to develop a single-screen webpage tailored for small screens such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or mobile phone displays. I aim to make all content (specifically about 3-4 rows of a ta ...

jqueryhtmlcss

Troubleshooting Problem with Web Forms and Bootstrap Form Design

Currently, I am utilizing a simplified version of the Admin LTE Bootstrap Theme in an ASP.NET Web Forms Project. In this project type, only one form tag can be used per page. The form tag must encapsulate both the Top (Nav) and Bottom (Side Bar Left & Mai ...

cssasp.netformswebforms

Is there a way to eliminate the horizontal line in my Table design?

Is there a way to eliminate the horizontal line from the table? css, html <table border="1" style="width:100%; border-collapse: collapse"> <tr> <th>Prepared By:</th> <th>Released ...

htmlcss

Does JSX have an API that can handle self-closing tags, such as <br>, if they are not closed properly?

For my latest project, I've been working on a ReactJS component using JSX and it looks something like this: <script type="text/jsx"> var HelloWorld = React.createClass({ render: function() { return ( < ...

javascripthtmlreactjs

Polymer event / callback for appending new child nodes

My current project involves creating a custom element, let's call it <parent-element>, that performs specific actions based on the presence of its childNodes. When I define the element like this: <parent-element> <div> </div&g ...

javascripthtmlpolymerweb-componentmutation-observers

Position the background in CSS according to the class name

There are a total of 8 icons, with 4 in blue and 4 in grey. Therefore, product 1 has both a blue icon and a grey icon. When the user has product 1, they will see the blue icon (with an added class on the container called .gotProduct), and when they don&ap ...

jqueryhtmlcss