Troubleshooting an HTML Design Flaw: How to create a 3x3 table with

I have been attempting to design a HTML page with a 3x3 layout. Despite trying various methods, including divs and tables, I am having difficulty achieving equal spacing around the centered image and the other table rows. Below is an example of the layout I am aiming for:

<body>

<h1>Web Portal</h1>

<div>
    <table class="styled">
    <tr>
        <td><button type="button">Click Me!</button></td>
        <td><button type="button">Click Me!</button></td>
        <td><button type="button">Click Me!</button></td>
    </tr>
    </table>
</div>

<div>
    <table>
        <tr>
            <td><button type="button">Click Me!</button></td>
        </tr>
    </table>

    <img src="rais_globe.png" alt="rais_logo" height="420" width="420">

    <table>
        <tr>
            <td><button type="button">Click Me!</button></td>
        </tr>
    </table>

</div>

Answer №1

check out a demo using css tables

This is the HTML structure:

<div class="table">
    <div class="row">
        <div class="cell1">row 1</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 2</div>
        <div class="cell2">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 3</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
</div>

Here is the corresponding CSS:

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    border:1px solid #000;
}
.row {
    display:table-row;
    height:100%;
}
.cell1, .cell2, .cell3 {
    display:table-cell;
    width:33%;
    height:100%;
    border:1px solid #CCC;
}
.cell2 > img {
    width:100%;
    height:auto;
}

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

How to disable a select list in HTML using vue.js when it is checked

I need assistance with a form that includes an "age" field. There are two possible scenarios: if the "unknown" box is checked, then the user should not be able to enter/select an age (the option should be disabled). If the box is unchecked, then the user s ...

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Trying to grasp the concept, I experimented with the following setup: <div id="Outer"> <div id="Inner"></div> </div> In this scenario, the outer div has a relative position and the inner div has an absolute position. This allo ...

"Combining the powers of Ajax, jQuery, and PHP

I have developed a jQuery form that looks like this <div data-role="page" id="page3" data-theme="d" > <div data-role="header"> <h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1> ...

Obtaining the URL from the anchor tag

I am currently working on a project that involves scraping data from the cinch.co.uk website. My tools of choice are Python along with the BeautifulSoup4 and Request libraries. My goal is to extract car data from each advertisement, starting by navigating ...

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

How to customize the appearance of an HTML checkbox using custom images for a unique

Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...

Content within the Iframe is in the process of loading, followed by

Exploring the code below: <iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> Is it a possibility that the ifra ...

Exploring the possibilities of applying CSS to customize the color of various elements

Is there a way to set the color of elements in CSS so that it applies to everything such as fonts, borders, and horizontal rules when applied to the body? How can I accomplish this effectively? ...

The CSS JSON code I have written is not having any impact on the appearance of my div

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles/common.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type='text/javascript'> ...

The Material UI - makeStyles function is having difficulties generating the intended styles

After implementing withStyles and makeStyles from material-UI, I encountered an issue where the CSS styling was not as expected, despite the correct class name being returned. For example, consider the following component: import React, { Component } fro ...

Tips for preventing multiple counter buttons from conflicting with one another

Currently, I am in the process of creating an online restaurant platform that allows customers to place food orders. To streamline this process, I am developing individual cards for each food item available on the menu. In addition, I am implementing butto ...

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...

Tips for choosing and deselecting data using jQuery

Is there a way to toggle the selection of data in my code? Currently, when I click on the data it gets selected and a tick image appears. However, I want it so that when I click again on the same data, the tick will disappear. How can I achieve this func ...

The Iframe contains its own scroll feature within the body

I am facing an issue with displaying an Iframe inside a modal. The challenge is that the content within the Iframe varies in height, making it difficult to set a fixed height for the Iframe itself. When I try setting the height to 100%, the result is a 150 ...

Targeting images within content in Wordpress

In my custom Wordpress theme, specifically on the single-post page where individual posts are displayed, I have implemented the following code: <article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>> <div cla ...

Different methods to disable scrolling when the mobile menu pops up

I have implemented a mobile menu option that appears when you click on the triple line logo, but unfortunately, users can still scroll while the menu is open. I've tried using position:fixed; but haven't been successful in preventing scrolling be ...

The Cyrillic text displays uniquely across three different web browsers

On our company's website, I implemented a search function. You can input the minimum and maximum cc of the glass you're looking for, and it will filter the database to display relevant results. The issue I'm facing is that when viewing the r ...

Adjust the font size to fit the size of the button when resizing a md-button

Currently utilizing md-button with text inside An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution If anyone has any suggestions on how to resolve this problem, please share. I have included screenshots ...

I'm feeling a bit lost on where to go next with this JavaScript

I've been working on a project in Python where I need to retrieve a file, store it in an array, and display a random string from the array on HTML. However, I have no experience with JavaScript and am unsure how to proceed. I suspect there may be an i ...