Enhancing the appearance of tables with advanced CSS and HTML styling

Is it possible to create a table like this using only CSS and HTML?

The white area represents the places table. Here is the HTML code for the table :

<table class="places">
    <tr>
        <td class="solid">K</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="solid">P</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td class="solid">25</td>
        <td class="solid">26</td>
        <td>&nbsp;</td>
        <td class="solid">47</td>
        <td class="solid">48</td>
    </tr>

    (...)

</table>

And here is my CSS :

.places{
    position:relative;
    background:white;
    width:160px;
    margin:0 auto;
    text-align:left;
    padding:5px;
    border-collapse: collapse;
}
    .places tr {
    }
        .places td {
            width:22px;
            height:22px;
            text-align:center;
        }
            .solid {
                border: 1px solid #d2cdd1;
                border-top:none;
                background-color:#e7e7e7;
                text-align:center;
                cursor:pointer;
            }

I thought that padding would work in tables, but it seems like I was mistaken. Cellspacing/cellpadding does not have any effect. Currently, my table looks like this:

htmlcsshtml-table

Answer №1

If you want to control the spacing between elements in a table, try using the border-spacing property.

Table cells have different display values compared to other elements like div and p. For example, table cells and rows have their own display values of table-cell and table-row. Unlike block level or inline elements, tables require special handling when it comes to styling.

To achieve the desired spacing with separate borders, you can combine border-spacing with border-collapse: separate. Check out this example for reference: http://jsfiddle.net/kjag3/1/

Additionally, I've improved the HTML structure by splitting them into two tables. This eliminates the need for fillers in empty cells, resulting in cleaner code overall.

Answer №2

The inability to add spacing between table cells is related to the use of border-collapse set to collapse in the styling of the table. By switching to border-collapse: separate, it becomes possible to introduce margins to the table cells, creating the desired space between them.

When border-collapse: collapse is employed, adjacent table cells share the same border, leading to the impossibility of adding space between them due to their close connection.

Answer №3

Have you considered whether a table structure is the best approach for your goal?

It appears that 'K' and 'P' may be headings, and the space between the numbers suggests they are separate entities rather than part of the same table. You might want to remove the table and restructure your HTML using simple headings and div tags like this:

HTML:

<div class="places">
    <h2>K</h2>
    <div>25</div>
    <div>26</div>
    <div>23</div>
    <div>24</div>
    <div>21</div>
    <div>22</div>
</div>

<div class="places">
    <h2>P</h2>
    <div>47</div>
    <div>48</div>
    <div>45</div>
    <div>46</div>
    <div>43</div>
    <div>44</div>
</div>

CSS:

.places {
    width: 55px;
    float: left;
    margin: 0 25px 0 0;

}

.places h2, .places div {
    width: 22px;
    height: 22px;
    margin: 0 3px 3px 0;
    border: 1px solid #d2cdd1;
    border-top:none;
    background-color:#e7e7e7;
    text-align:center;
    cursor:pointer;
    font-weight: normal;
    font-size: 12pt;
}

.places div {
    float: left;
}

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

Selenium WebDriver: The challenge of using visibilityOfElementLocated when the element is not actually visible

I've encountered an issue with the Firefox Webdriver where it fails to accurately determine if an element is visible. Here is the code I am using, which incorrectly indicates that the element is visible: wait.ignoring(UnhandledAlertException.class).u ...

htmlcssseleniumselenium-webdriver

Arranging Angular Cards alphabetically by First Name and Last Name

I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...

javascripthtmlangulartypescript

Issues with displaying the favicon on browser search results in a React.js website hosted on Hostinger

Having a React.js application hosted on Hostinger, the icon displayed next to the website title in search results (known as favicon.ico) is not functioning properly. https://i.sstatic.net/zgLu4.png This is my index.html file: <html lang="en"> ...

htmlreactjshosting

Is there a way to retain the SVG image while also including an input button?

Struggling to hide input buttons with plus and minus SVG images? Different ids tried but no luck. Text box value also getting cut off. How to fix? Snippet provided below with some styling adjustments. $('.btn-number').click(function(e){ e. ...

javascripthtmlcss

What is the best way to blend the color of element 1 with the color of the body or element 2?

I am trying to overlay another element on top of the body tag in my HTML, which has already been assigned a color. I have experimented with using position relative and absolute along with z-index but haven't found a solution yet. Here's how I&ap ...

htmlcss

Retrieving User ID for Updating in MySQL using PHP

My current dilemma involves updating specific entries in my database using a PHP form. The issue arises when I try to only update an entry with a particular ID. Let me break down the problem: In my database, I have a table of users. When I choose to edit ...

phphtmlmysqldatabase

Adjustable dimensions for a collection of squares based on screen size

I am currently designing a grid composed of 1:1 squares and allowing the user to continually add more squares. My main goal is to ensure that the size of each square maintains its aspect ratio while being able to resize accordingly. The challenge lies in k ...

javascripthtmlcss

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

Recently began working on converting a PSD to HTML and I've reached a point where everything seems fine. However, I understand that my CSS programming may not be the best at the moment. With your help, I am confident that I can learn and improve gradu ...

htmlfooter

Achieve bottom alignment for an element inside a flexbox, all without the need for position:absolute

Check out the jsfiddle provided: https://jsfiddle.net/q3ob7h1o/1/ Alternatively, you can read the code here: Code * { margin: 0; padding: 0; } ul { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row ...

htmlcssflexbox

Is there a way to track the amount a user scrolls once they have reached the bottom of a page using Javascript?

It's a popular UI pattern on mobile devices to have a draggable element containing a scrollable element. Once the user reaches the end of the scrollable content, further scrolling should transition into dragging the outer element. For example, in this ...

javascriptcss

Is it possible to utilize two :before pseudo classes within a single div element?

Suppose I had the following HTML code snippet: <div class="container"> <p>blah blah blah</p> </div> Can we apply two :before pseudo classes to that same container div? For example, like this: .container:before{ content: " "; ...

htmlcsspseudo-element

Differences between -webkit- and -moz-transition

My website uses CSS3 transitions and I have noticed that the -webkit- prefix works, but the -moz- prefix does not seem to be working. This is the CSS code I am using: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transit ...

csswebkitmozillacss-transitions

Unexpected behavior observed with field alignment

I've been attempting to align the field in an Angular HTML page, but it's not working out as I expected. Here's how the HTML file looks: <div id="report-prj-search"> <div class="dx-fieldset flex-column"> <div class="fle ...

htmlcssangularangular7

`Moving objects issue within a relative parent container`

Here's the issue I am facing - while using prototype and scriptaculous (although jquery may have the same problem), I have a list of draggable images within a div that is relatively positioned. The challenge arises when I try to drag these images out ...

javascriptjquerycssprototypejs

Utilizing HTML5 for page-relative translation

Is there a way to apply a translate to an element so it moves to a specific point on the page instead of relative to its starting position? For instance, in the code snippet below, the "card" elements will move 50, 100 relative to their initial position. ...

javascriptcsshtmlwebkithtml5-animation

Opera's compatibility with jQuery's Append method allows developers to

I recently wrote a jQuery script that interacts with a JSON feed and dynamically creates HTML code which is then added to a designated div on my WordPress site. Surprisingly, the functionality works flawlessly in all browsers except for Opera - where not ...

javascriptjqueryhtmljson

Dynamically disable inputs based on the selected options in a dropdown

Here is the initial HTML code that generates a select, an input, and a button: <div class="form-group"> <div class="table-responsive"> <table class="table table-bordered" id="dynamic_field"> <tr> ...

javascriptjqueryhtml

Can the lazy load script dependent on jQuery be utilized before the jquery.js script tag in the footer?

After receiving HTML from an AJAX callback, I noticed that there is a script tag for loading code that uses jQuery. However, I consistently encounter the error of jQuery being undefined. All scripts are connected before the closing </body> tag. Is ...

javascriptjqueryhtmlajax

Bootstrap 5 - Collective border surrounding entire drop-down menu

My goal is to wrap the entire bootstrap dropdown in a single shared border. The examples provided by Bootstrap have the toggle button with its own border and the subsequent dropdown-menu with another border. I am looking to have both the toggle button and ...

htmlcssdrop-down-menu

How can I create a Bootstrap 4 navigation menu that toggles on the left side but keeps the button on the right

Is it possible to create a collapsible bootstrap 4 navigation with the toggle button on the left side while also having action buttons on the right side that are not part of the collapsible menu? How can I prevent the navbar-collapse menu from pushing down ...

htmlcsstwitter-bootstrapnavigationbootstrap-4