Embedding a compact table using HTML on the sidebar

I am facing a challenge in this HTML code where the table appears next to the spans. How can I make sure that the spans appear below the table instead?

<div>
    <table align="right">
        <tr>
            <td>smthg</td>
        </tr>
        <tr>
            <td>smthg</td>
        </tr>
        <tr>
            <td>smthg</td>
        </tr>
    </table>
</div>
<div>
    <div>
        <span>smthg</span>
         -
         <span>smthg</span>
         -
         <span>smthg</span>
        <hr />
    </div>
</div>
htmlcss

Answer №1

No longer will tables contain an align attribute. By removing align="right", the spans will now be displayed below the table.

If you wish for the table to be positioned on the right, utilize CSS with float: right. Additionally, include clear: right in the following div to ensure it appears below the table.

<!DOCTYPE html>
<html>
<head>
<title>A Title Here</title>
<style type="text/css">
table {
    float: right;
}
#following {
    clear: right;
}
</style>
</head>
<body>
<div>
    <table>
        <tr>
            <td>content1</td>
        </tr>
        <tr>
            <td>content2</td>
        </tr>
        <tr>
            <td>content3</td>
        </tr>
    </table>
</div>
<div id="following">
    <div>
        <span>text1</span>
         -
         <span>text2</span>
         -
         <span>text3</span>
        <hr />
    </div>
</div>
</body>
</html>

Answer №2

Did you find what you were searching for?

<body> 
<div>
    <div>
        <span>text</span>
        -
        <span>text</span>
        -
        <span>text</span>
        <hr />
    </div>
</div>
<div>
    <table align="right">
        <tr>
            <td>X</td>
        </tr>
        <tr>
            <td>Y</td>
        </tr>
        <tr>
            <td>Z</td>
        </tr>
    </table>
</div>
</body>

http://jsfiddle.net/username/example/

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

Tips on displaying inline span text within an anchor element, above the anchor text

Check out the code I've created below: .tooltip1 { z-index: 1; position: relative; } .tooltip1 .tooltiptext { visibility: hidden; width: 300px; ...

htmlcsspositionz-index

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

htmlcssnode.jsexpress

The sidebar should remain fixed on top when viewed on mobile devices, but not when viewed on desktop

Prior to beginning a new project, I'm interested in exploring the possibility of implementing a sliding sidebar for mobile and tablets. On desktop, however, I envision a fixed sidebar that is part of the main container layout as shown below: <div ...

jqueryhtmlcssbootstrap-4media-queries

Creating a floating border effect.Would you like to know how

Currently working on a new component, I'm looking to create a unique border for certain cards. However, I'm struggling to find the perfect solution. Check out the specific border style needed in the image provided below. https://i.sstatic.net/4vA ...

csssassfrontend

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

Animations experiencing delays on mobile Chrome

I am currently exploring the world of website animations. I have a version of the jsfiddle code linked below that is similar to what I am working on. The animations function perfectly when viewed on desktop, but when accessed on mobile - specifically on my ...

javascriptcssmobilecss-animationscss-transitions

Discover how to execute a function depending on a specific button in Node.js using Express

How can I trigger a function based on which button is clicked? I am working with an EJS file named test.ejs <form> <input type="submit" value="Click here 1"></input> <input type="submit" value="Click here 2">&l ...

htmlnode.jsexpress

What is the best way to add a line break to a menu item?

Looking for some assistance with Angular Material here. I am trying to design a menu that includes an item with two lengthy paragraphs, but the text is getting truncated and only showing the first paragraph. If anyone could offer guidance or help, it woul ...

htmlcssangularangular-materialmenuitem

Go to a different webpage containing HTML and update the image source on that particular page

I am facing an issue with my html page which contains multiple links to another page. I need to dynamically change the image references on the landing page based on the link the user clicks. The challenge here is that the link is inside an iframe and trigg ...

javascripthtml

Combining two arrays in JavaScript and saving the result as an XLS file

I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...

javascriptjqueryarrayshtml

The Line Break <br/> element does not display properly in Java Servlet code

I recently developed a dynamic web application using servlet. The main component is a form on the index.html page that triggers the servlet's doGet method. Check out an excerpt of my code for the doGet Method below. String firstName = request.getParam ...

javahtmlservlets

Using Jquery and CSS to create a sleek animation for opening a div box container

Designed an animation to reveal a div container box, but it did not meet the desired criteria. Expectations: Initiate animation horizontally from 0% to 100%. Then expand vertically to 100% height. The horizontal animation from 0% to 100% is not visible ...

jquerycss

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

javascripthtml

Prevent page from reloading when Image Button is clicked

I attempted the following code: <asp:ImageButton ID="imgDropArrow" class="cssDropArrow" ImageUrl="~/Styles/Down.gif" OnClick="ImageDropArrow_Click" runat="server"/> Whenever I click on this image button, the page refreshes. What I'm looking ...

htmlasp.net

Adjust the display from none to block when the parent element is set to flex

JSFiddle Demo Issue with - .popupcard_first:hover .popupcard_first { display: block; } I am trying to link the :hover effect to the first card only, but the only way I could make it work is by changing .popupcard... to .featured_cards:hover .po ...

htmlcssflexbox

Enhance Your Website with Bootstrap 3.0 Affix

Looking to attach a right hand column to the top of the window as you scroll using Bootstrap 3.0 and 'affix' feature. Here is the HTML for the element: <div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477"> This is ...

javascriptjqueryhtmlcsstwitter-bootstrap

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

javascripthtmlshow-hide

Having trouble fetching website data using Selenium in Python

I'm encountering an issue when attempting to extract a table from a dynamic webpage using selenium in Python. Here is the code snippet I am currently using: from selenium import webdriver url = 'https://draft.shgn.com/nfc/public/dp/788/grid&apos ...

pythonhtmlselenium-webdriverweb-scrapingdynamic

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

Why are my Chrome Div regions failing to expand to their full width?

I have been searching but couldn't find an answer to my issue, so I apologize if this question has been asked before. I am working on a simple site layout and noticed that two of the div regions do not expand fully in Chrome, however, they do in Firef ...

htmlcss