What are some alternatives to tables for displaying two lines of headings and corresponding data?

Here is a snippet of HTML code I am working with:

  <div><span class='top'>Answered</span></div><div id="hour">15</div>
  <div><span class='top'>Not Answered</span></div><div id="minute">35</div>
  <div><span class='top'>Marked for Review</span></div><div id="second">10</div>
  <div class='clear'></div>

The resulting output of the above code is displayed as follows:

Answered
15
Not Answered
35
Marked for Review
10

I need assistance in formatting this data into the following structure without using a <table> tag:

Answered  Not Answered  Marked for Review
   15          35               10
htmlcss

Answer №1

Start by enclosing each of your top-bottom pairs within a div:

<div class="outer">
    <span class='top'>Completed</span>
    <div class="bottom" id="hour">15</div>
</div>
<div class="outer">
    <span class='top'>Incomplete</span>

    <div class="bottom" id="minute">35</div>
</div>
<div class="outer">
    <span class='top'>Under Review</span>
    <div class="bottom" id="second">10</div>
</div>
<div class='clear'></div>

Next, float the outer divs to the left and apply center alignment:

.outer {
    float: left;
    text-align: center;
    margin: 5px;
}
.clear
{
    clear: both;
}

View the working example on jsFiddle: http://jsfiddle.net/6947c/

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

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

javascriptjqueryhtmlcross-browserscrollbar

What is the widely used term for the container that allows for panning by dragging with a mouse?

I am looking to design a container that extends beyond the width of the page, allowing users to pan by dragging through empty space between controls without zooming in or out. What is this type of container control typically referred to as? I am intereste ...

htmlvue.jsuser-interfacecontrols

Hover effect on a single cell in a Bootstrap table

As I was working on creating a calendar design, I found myself pondering how to incorporate a hover effect using Bootstrap 4 for the cells. Here is a preview of the current calendar design I am aiming to achieve a hover effect similar to Bootstrap's ...

htmlcsstwitter-bootstrapbootstrap-4

Locating and clicking a button within a table using Selenium WebDriver with Java, along with an event listener

This is my first question on Stack Overflow and I have not made any progress after a day of research. I am currently experimenting with WebDriver in Netbeans for testing our services. We chose WebDriver because we will need to test file uploads in the fut ...

javahtmlseleniumselenium-webdriverwebdriver

Nested div within another div, shifting position relative to scrolling (React)

My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when ...

htmlcssreactjsanimationscroll

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Add ...

javascriptjqueryhtmlcss

What exactly is the significance of "hash" in terms of Internet Explorer style

After downloading a sample CSS file, I noticed the following entry: #text-align: right; The comment beside the entry mentioned that this expression is specifically for justifying it in IE, while text-align: right; works for Safari and Chrome. My questi ...

css

How can I vertically align a photo or image on Facebook?

Can anyone explain how Facebook manages to vertically align its photos without using padding or margins? I've looked into their img tag and its parent, but neither seem to have any spacing properties. Although there is a vertical-align attribute prese ...

javascripthtmlcssfacebookvertical-alignment

Do Dreamweaver's design and live view display contrasting elements?

Check out the images below: http://gyazo.com/c3ffe1d0a48b717f695d7cbd860eda50.png (Design view) http://gyazo.com/a1e09aacc855c013d349017d0487402d.png (Live & browser view) In the design view, everything appears as intended and looks great. However, i ...

htmlcss

Dynamically insert JavaScript and CSS files into the header by using the append method

Due to a specific reason, I am loading CSS and scripts into my head tag using the "append" method. For example: $("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); I'm asynchronously pulli ...

javascriptjqueryhtmlcssajax

Issue with JAWS screen reader failing to announce aria-expanded status

My aim is to ensure that the collapsed state is accessible in both NVDA and JAWS, but I am encountering issues with it displaying properly in JAWS. Does anyone have any suggestions on how to rectify this? I have included images of the code and link list b ...

htmlaccessibilitywai-ariajaws-screen-readernvda

Issue with reordering columns in Bootstrap 5

Currently, I am transitioning to Bootstrap 5 and facing challenges with the column re-ordering feature. Within my layout, I have three columns: a title, an image, and a paragraph of text. My goal is to display the image on the left, the title on the right, ...

cssbootstrap-5

Height Difference Caused by Textarea Overflow with Auto Scrollbars

Displayed below is code that generates a textarea with 3 visible rows: <textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea> Unexpectedly, in Firefox (version 20.0.1), the textarea displays 4 rows instead of 3. To view ...

htmlcssfirefoxtextarea

What is the best way to calculate the width for each of the three elements in a row so that they all have 300px

Creating my own framework using flexbox has been an interesting journey. One of the major challenges I faced with flexbox is when dealing with an odd number of elements in a row, such as 3, 5, or 7. To tackle this issue, I decided to use JavaScript/jQuery. ...

javascriptjquerycssflexbox

Is there a way to automatically refresh the page and empty the input fields after clicking the submit button on the contact form?

My knowledge of PHP and js is limited, so I may require additional guidance in incorporating those codes. Lately, I've been developing a contact form and making good progress. However, I'm struggling with figuring out how to refresh the page or ...

javascriptphphtmlcss

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

javascriptjquerycsssortingwebkit

What is the best way to align the elements to the beginning and place the flexbox container in the center

I posted this plunker instead of the previous one. My goal is to align the flex container horizontally while keeping its items aligned at the start. I want to use align-content: flex-start along with justify-content: center. Currently, if the last row h ...

cssflexbox

Using a jQuery event to apply styles with CSS

Hello, I am using jQuery Easy UI on my webpage but feeling a bit confused. I want to create an input field that looks like a tagging field - meaning when the user types a separator character (let's say a comma), the word being typed will have its CSS ...

jquerycsstagging

How can we enhance the integration of HTML and PHP for a smoother workflow?

Are there alternative solutions, aside from using a template engine like Smarty, for managing large code like this? <table class="table table-striped dataTable table-bordered"> <thead> <tr> <?php $o ...

phphtml

Obtain the VW/VH coordinates from an onclick action in JavaScript

With this code snippet, you'll be able to retrieve the x and y coordinates of a click in pixels: document.getElementById("game").addEventListener("click", function(event) { console.log(event.clientX, event.clientY); }); However ...

javascriptcssdomaddeventlistenerviewport-units