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

Is there a different way to invoke PHP within JavaScript?

Is it possible to include PHP code in JavaScript? I have come across information stating that this practice is not recommended: document.getElementById('id1').innerHTML="<?php include my.php?>"; If including PHP directly in JavaScript is ...

javascriptphphtmlweb

Is it possible to apply a background image on top of an existing image?

Is it possible to set a background image on an img tag? This is my current HTML markup: <div id="content"> <img src="my-image.jpg" alt="image" class="img-shadow"> </div> Here is my CSS code: #content img { floa ...

htmlcssimagebackground-image

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

What is the process for creating this image using HTML and CSS?

Looking to style an image using HTML and CSS. This is what I attempted: <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span> However, the result doesn't ma ...

htmlcss

JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up. ...

javascriptjqueryhtmlcss

Gain command over the underline style of text without relying on the border property

Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...

htmlcss

What is the best way to align a jQuery Cycle 2 Slider in the middle of the

Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...

jquerycssjquery-cycle2

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

cssangularprimeng

Adjusting the zoom feature in CSS3

I'm looking to have my React app display as if the user has changed the zoom level to 90%. I attempted to tackle this issue using CSS. body { transform: scale(0.9); } However, this method did not result in the screen appearing similar to wh ...

htmlcssreactjsmeta-tags

Bootstrap 3's Clear:Left Media Query Feature

Bootstrap is being used, and there is a div with col-xs-12, col-sm-6, col-md-4 classes. Task : To add a clear on every 1 item for col-xs-12, add a clear on every 2 items for col-sm-6, and clear on every 3rd item for col-md-4. The current code only s ...

csstwitter-bootstrap-3media-queries

Tips for enhancing this CSS design to resemble a table

I am a beginner in working with CSS layouts for websites and I have implemented the following code that serves my purpose. Although it is currently functional, its functionality does not necessarily mean that it is well-written. Could someone review this ...

css

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

How can I ensure my game or website fits perfectly on the screen without any need

I have recently developed a fun Erase-A-Man game that is optimized for mobile devices. However, I am facing an issue where users need to scroll to view all the letters on their screens. My goal is to make the game fit perfectly on all phone screen sizes so ...

javascriptjqueryhtmljquery-mobile

`Is it challenging to convert JSON into HTML, leading to undefined results?`

I am currently attempting to extract YAHOO data by utilizing getJSON and YQL. Although the connection is successful, I can retrieve the data and log it in the console. However, I am facing difficulties when trying to display this data on the JSP page I am ...

javascripthtmljson

Tips for displaying the Font Awesome icons

I have included Font Awesome icons within the <span> tags and applied the necessary styles in my CSS file. However, the icon is not being displayed correctly. I am looking for a solution to ensure the correct display of the icons. The HTML code wher ...

htmlcss

`What purpose does the data-view attribute serve in Durandal JS?`

While experimenting with the Durandal JS starter kit application, I happened to view the page source in Mozilla browser and noticed the following. <div class="" data-view="views/shell" style="" data-active-view="true"> </div> I couldn't ...

javascripthtmldurandal

Determining when a checkbox changes state using HTML and JavaScript

My main objective is to display divX2 when the checkbox for x2 is checked, either by directly clicking on x2 or by clicking on the "Check All" checkbox. The functionality works as intended when the checkbox for x2 is clicked, but it fails to work when the ...

javascriptjqueryhtmlcheckbox

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...

javascriptjqueryhtmlreturnkeyboard-shortcuts

Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code: @import "../core/variables.less"; @import "Mi ...

cssless