Creating a Stylish Table Using CSS

Looking for the most effective way to utilize divs in order to create a table-like structure similar to this html table:

<table width="100%">
    <tr>
        <td align="right">
            Name: 
        </td>
        <td align="left">
            Jennifer
        </td>
    </tr>
    <tr>
        <td align="right">
            Age: 
        </td>
        <td align="left">
            19
        </td>
    </tr>
</table>

I've been struggling with text alignment no matter what method I use. This content needs to be contained within another div that has specific width, floats right, and is centered. Any help would be greatly appreciated.

css

Answer №1

Utilize the power of tables.

Why reinvent the wheel? Stick with elements that are logical for presenting your data. In this scenario, a table is the perfect choice.

Answer №2

When examining your example, an alternative semantic choice would be a definition list:

<dl>
  <dt>Title</dt>
  <dd>Jennifer</dd>
  <dt>Age</dt>
  <dd>19</dd>
</dl>

To achieve a table-like appearance and behavior, you could utilize display:table-cell.

Answer №3

Here is my approach to HTML:

<div class='lefty'>Title:</div><div class='righty'>Sophie's World</div>
<div class='lefty'>Author:</div><div class='righty'>Jostein Gaarder</div>

For the CSS part, I would do it like this:

div{
    width:60%;
    float: left
}
.lefty{
    text-align: right;
}
.righty{
    text-align:left;
}

Check out the fiddle demo here: http://jsfiddle.net/SbXdG/

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

Adjust div to match the width of the image

My portfolio page features an image display with zoom functionality. Here is the code I am currently using: http://codepen.io/Mpleandro/pen/LvrqJ The division that showcases the image has a class called .display, located on line 13 of the HTML file and CS ...

cssresponsive-designimageinheritance

CSS-enhanced automatic scrolling

On my WordPress website, there is a project slider that consists of images with text. Currently, the slider does not auto-scroll and requires manual navigation using buttons. If I want to eliminate the need for buttons and make the slider scroll automatic ...

cssanimationscroll

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

cssinternet-explorer

Incorporate a Background Using PHP

There is a form on my website that includes a drop-down menu like this: <select name="status" class="form-control" style="width:100px; float:left;"> <option value="0" <?php if($status == 0)echo 'selected="selected"';?>& ...

phpjqueryhtmlcss

The modal popup is getting lost behind the slider

I am facing an issue with opening a Modal popup for customer details. The problem occurs when the modal opens behind a slider on the website. However, when I slide the page down, the content of the modal becomes fully visible. https://i.stack.imgur.com/wR ...

htmlcssmodal-dialog

Automatically insert a page break after every set of n items to make printing easier

When printing a web page with a list of items, sometimes the items end up appearing garbled across multiple pages. Is there a method to add a CSS class definition after a certain number of items have been added on a page? The CSS in question would be asso ...

.nethtmlcssprintingrepeater

Unable to move up and down in my iframe

I am currently working on an Instagram page that is visible through an iframe. Everything seems to be functioning fine on my iMac, but I am facing an issue with scrolling on my iPhone and iPad? After reviewing my code, I couldn't find any hidden over ...

htmlcssiframescrolloverflow

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

javascriptjqueryhtmlcss

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

htmlcsshtml-table

What causes the fixed div to appear when scrolling horizontally?

I have replicated this issue in a live example: http://jsfiddle.net/pda2yc6s When scrolling vertically, a specific div element sticks to the top. However, if the window is narrower than the wrapper's width and you scroll horizontally, the sticky elem ...

javascriptjquerycss

What is the best way to create a website cover image with a set height and a width that expands?

Is there a way to have a cover image on a web page that expands in width as the screen size increases, but maintains a fixed height? I found a page with the desired effect that I want to replicate: Below is the link to my page where I want to implement t ...

htmlcss

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?

I am working on a fluid layout where I have a div that always matches the height and width of the browser window, regardless of resizing. Essentially, this div is set to be 100% height and width of the browser window. Inside this div, I have an image that ...

jquerycssimage-resizingfluid-layoutfluid

Opening a dialogue box upon clicking a table row

I have a table in HTML where I want a dialog box to appear when a row is clicked. To update my database, I am using an AJAX call like this: $(document).ready(function() { $('.myrow').click(function () { $("#dialog").dialog({ ...

javascriptjqueryhtmlcssajax

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Looking to achieve a functionality where clicking on .toggle-menu will toggle a class on the specified data-target element and expand other divs accordingly. jQuery(document).ready(function() { var windowWidth = jQuery(window).width(); if (win ...

javascriptjquerycss

The navbar-fixed-top class in Bootstrap seems to be malfunctioning

As I work on expanding my portfolio website using Bootstrap, I decided to incorporate the 'navbar-fixed-top' class to make the navigation bar stick to the top of the window. I found a helpful example of this feature here: https://getbootstrap.co ...

htmlcsstwitter-bootstrapbootstrap-4

Ensure two CSS components occupy the entirety of their container, positioned next to each other, with margin spaces between

I am looking to make two elements take up a precise percentage of the parent's width, while also including margins between them. Here is my current setup: <div class='wrap'> <div class='element'>HELLO</div>< ...

htmlcss

Creating a dynamic Bootstrap design featuring variable height column content within a row, properly adjusting and wrapping them on various screen sizes

https://i.sstatic.net/eFfgY.png Looking for a way to properly position blocks using bootstrap4 based on screen size. When the screen is larger, all blocks should be in a row. However, when the screen size is reduced to medium, the rightmost block should mo ...

htmlcsstwitter-bootstrapbootstrap-4

Looking for help to prevent my bootstrap nav bar from collapsing and showing a hamburger menu on mobile devices. This is my first CSS project and I am seeking guidance

Looking for help keeping my bootstrap nav bar from collapsing on mobile devices (want it to display a hamburger icon). I'm new to CSS so any guidance is appreciated! This is the code for my nav bar using bootstrap classes... <nav class="navb ...

cssbootstrap-5

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

csstwitter-bootstrapbootstrap-4

Change the color of divb using CSS when diva is hovered over

Is it possible to change the color of the second class to white when the first class is hovered over? <div class="diva">This is the first class</div> <div class="divb">This is the second class</div> <style> .diva:hover + .d ...

htmlcssclasscolors