What is the proper way to position elements within a <td> tag?

Question

What is the proper way to position elements within a <td> tag?

I am working with Products that have images of maximum size 100px. This means either the width is 100px and the height is less than 100px, or the height is 100px and the width is less than 100px. One side always measures 100px.

My goal is to display the product image on the right side, and the name and price on the bottom left of that image. The layout structure I require can vary in different cases:

I attempted this:

<table style="width: 100%;">
        <tbody>
            <tr>
              <td style="height: 100px; ">
                  <a href="@Url.Action("Details", "Product", new { id = Model.Id })" > 
                     <img src="@Url.Content("~/Images/" + Model.Image)" style="float:right;" alt="" />
                    <b style="margin-top: 15%; float: right;">
                        <label>@Model.Price</label>
                        <br />
                        <label>@Model.Name</label>
                    </b>
                  </a>
              </td>
           </tr>
        </tbody>
    </table>

However, this only works for an image height of 100px. The margin-top: 15%; property is static. It needs to adjust when the image height is 50px, 60px, etc. How can I achieve this? It's not necessary to use a table. Any element suggestions are welcome.

EDIT: I added another <td> side by side and placed the price and name in the first <td>, and the image in the second <td>.

Now I need to set the <td> width based on the inner elements' sizes. If the image width in the <td> is 90px, I want to set the <td> width to 90px. Is this possible?

html css alignment html-table

Answer 1

Answer №1

Instead of using tables, it is recommended to use CSS to achieve a similar effect, although please note that this method may not be compatible with IE7 or older browsers:

The CSS

.list li {
    height:100px;
    border:5px solid #000;
    margin-bottom:5px;
    width:100%;
    display:table;

}

.list li div {
    display:table-cell;
    vertical-align:middle;
    overflow:hidden;
}

.list li div a {
    display:table;
    width:100%;
}
.list li a span {
    display:table-cell;
    overflow:hidden;
    width:100%;
    vertical-align:bottom;
}

.list li a span b {
    display:block;
    padding-right:5px;
    float:right;
}

.list img {
    float:right;
}

The HTML

<ul class="list">
    <li>
        <div>
            <a href="#" > 
                <span>
                    <b>@Model.Pricexyz<br />@Model.Name</b>
                </span>
                <img src="http://placekitten.com/g/100/100" alt="" />
            </a>
        </div>
    </li>
    <!-- add other elements here -->
</ul>

A live demo has been provided for reference.

Answer 2

Instead of using tables, it is recommended to use CSS to achieve a similar effect, although please note that this method may not be compatible with IE7 or older browsers:

The CSS

.list li {
    height:100px;
    border:5px solid #000;
    margin-bottom:5px;
    width:100%;
    display:table;

}

.list li div {
    display:table-cell;
    vertical-align:middle;
    overflow:hidden;
}

.list li div a {
    display:table;
    width:100%;
}
.list li a span {
    display:table-cell;
    overflow:hidden;
    width:100%;
    vertical-align:bottom;
}

.list li a span b {
    display:block;
    padding-right:5px;
    float:right;
}

.list img {
    float:right;
}

The HTML

<ul class="list">
    <li>
        <div>
            <a href="#" > 
                <span>
                    <b>@Model.Pricexyz<br />@Model.Name</b>
                </span>
                <img src="http://placekitten.com/g/100/100" alt="" />
            </a>
        </div>
    </li>
    <!-- add other elements here -->
</ul>

A live demo has been provided for reference.

Answer 3

Answer №2

Here’s an idea I’ve come up with. Take note of the placeholder fields enclosed in brackets, and replace them with your actual backend data.

If you use tables, the columns may have different widths. To address your last scenario, you might need to determine the image height or retrieve it from storage, then assign a class to the item container.

<style type=”text/css”>

    .products-container > .item {
        height: 100px;
    }

    .products-container > .item.image-height-60 {
        padding: 20px 0;
        height: 80px;
    }

    .products-container > .item > .column {
        float: right;
        height: 100px;
    }

    .products-container > .item > .column.info-column {
        position: relative;
    }

    .products-container > .item > .column.info-column > .inner {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .products-container img {
        /* Placeholder image dimensions */
        /*width: 60px;
        height: 100px;*/

        vertical-align: bottom;
    }

    .products-container .clear {
        clear: both;
    }
</style>

<div class="products-container">
    <div class="item">

        <!-- Start with the image column as it is floated to the right -->
        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>

    <!-- Display where the assumed image height is 60 pixels -->
    <!-- The ‘image-height-60’ class has been added -->
    <div class="item image-height-60">

        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>
</div>

Answer 4

Here’s an idea I’ve come up with. Take note of the placeholder fields enclosed in brackets, and replace them with your actual backend data.

If you use tables, the columns may have different widths. To address your last scenario, you might need to determine the image height or retrieve it from storage, then assign a class to the item container.

<style type=”text/css”>

    .products-container > .item {
        height: 100px;
    }

    .products-container > .item.image-height-60 {
        padding: 20px 0;
        height: 80px;
    }

    .products-container > .item > .column {
        float: right;
        height: 100px;
    }

    .products-container > .item > .column.info-column {
        position: relative;
    }

    .products-container > .item > .column.info-column > .inner {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .products-container img {
        /* Placeholder image dimensions */
        /*width: 60px;
        height: 100px;*/

        vertical-align: bottom;
    }

    .products-container .clear {
        clear: both;
    }
</style>

<div class="products-container">
    <div class="item">

        <!-- Start with the image column as it is floated to the right -->
        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>

    <!-- Display where the assumed image height is 60 pixels -->
    <!-- The ‘image-height-60’ class has been added -->
    <div class="item image-height-60">

        <div class="column image-column">
            <a href="[link]" > 
                 <img src="[image_src]" alt="Image for [name]" />
            </a>
        </div>

        <div class="column info-column">
            <div class="inner">
                <span>[price]</span> <br />
                <span><a href="[link]">[name]</a></span>
            </div>
        </div>

        <div class="clear"></div>

    </div>
</div>

What is the proper way to position elements within a <td> tag?

Answer №1

Answer №2

Similar questions

Different width, same height - images arranged side by side in a responsive layout

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Position of fixed div set relative to its parent fixed div

Choose everything except for the list and its heading

Does adjusting the background transparency in IE8 for a TD result in border removal?

Getting data from Node.js to Angular 6: A comprehensive guide

Establish initial content for the specified div area

Tips for dynamically loading a modal

Adjust the Bootstrap row height to both occupy the full height while also being limited by the height of a designated container

Creating a dual style name within a single component using Styled Components

Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

The color scheme detection feature for matching media is malfunctioning on Safari

Unusual display of fonts on Chrome

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

The auto-fill feature in Chrome mistakenly inputs the saved username in the wrong field

Why are the buttons on my HTML/JavaScript page not functioning properly?

How can we incorporate interactive icons into the navigation bars on our Weebly site?

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

Struggling to get the picture and text to line up

How can I deactivate a specific range without altering the appearance with Bootstrap 5?