Creating a Table of Images

B.Brown2080 · June 3, 2019

Hello All,

I'm trying to create a table of images in which each image would be a different link to a product on our website.

I'm just learning how to code so I appreciate any help you can give!

Attached is pdf showing the general layout of what I'm trying to do.

Thanks!

Funce · June 3, 2019

You have a few ways to do this, but the easiest way is to use the <table> and corresponding tags. Take a look at this tutorial.

https://www.w3schools.com/html/html_tables.asp

If you add <img> tags instead of text, and style appropriately, you should get something similar to the PDF you've attached.

ishan_shah · January 21, 2020

You Can user Bootstrap To Make It easy , here is something that i made using bootstrap that might help you to create what you want.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>YourTv</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Fmovies.css">

    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <div class="card">
        <div class="card-header">
        <a href="https://fmovies.wtf/" class="badge badge-Info" style="font-size: 24px; text-decoration: none;">YourTv</a> </div>
          <ul class="link">
        <li>
          <a href="https://fmovies.wtf/home"   class="badge badge-dark">Home</a>
        </li>
        <li>
          <a href="https://fmovies.wtf/az-list" class="badge badge-dark">A-Z List</a>
        </li>
        <li>
          <a href="https://fmovies.wtf/movies" class="badge badge-dark">Movies</a>
        </li>
        <li>

          <a href="https://fmovies.wtf/tv-series" class="badge badge-dark">Tv-Series</a>
        </li>
        <li> 
          <a href="https://fmovies.wtf/most-watched" class="badge badge-dark">Most Watched</a>
        </li>
        </ul>
        </div>
    </div><br/>
    <div class="container">
        <div class="row">
            <div class="col-4">
            <a href=""> <img src="image/GOT.jpg" class="img-fluid" title="Game Of Thrones" alt="GOT"></a>
            </div>
            <div class="col-4">
                <a href=""><img src="image/Money.png" class="img-fluid" title="Money Heist" alt="Money Heist"></a>
            </div>
        
            <div class="col-4">
                <a href=""><img src="image/Stranger.png" title="Stranger Things" class="img-fluid" alt="Stranger Things"></a>
            </div>
        </div>
        <div class="row"> 
            <div class="col-12">
                <br/>
            </div></div>
        <div class="row">
            <div class="col-4">
            <a href=""> <img src="image/black.png" class="img-fluid" title="Black Mirror" title="Game Of Thrones" alt="Black Mirror"></a>
            </div>
            <div class="col-4">
                <a href=""><img src="image/vikings.jfif" class="img-fluid"  style="height: 220px;" title="vikings" alt="vikings"></a>
            </div>
        
            <div class="col-4">
                <a href=""><img src="image/sherlock.jfif" title="Sherlock" style="height: 220px; width: 400px;" class="img-fluid"  alt="Sherlock"></a>
            </div>
        </div>
        <div class="row"> 
            <div class="col-12">
                <br/>
            </div></div>
        <div class="row">
            <div class="col-4">
            <a href=""> <img src="image/13reason.jfif" class="img-fluid" title="Black Mirror" style="height: 220px; width: 400px;" title="13 Reason Why" alt="GOT"></a>
            </div>
            <div class="col-4">
                <a href=""><img src="image/friends.jfif" class="img-fluid"  style="height: 220px; width: 400px;" title="Friends" alt="Friends"></a>
            </div>
        
            <div class="col-4">
                <a href=""><img src="image/see.jpg" title="See" style="height: 220px; width: 400px;" class="img-fluid"  alt="See"></a>
            </div>
        </div>
    </div>
    <footer class="card-footer text-center"style="color:white">This Page  reffers To Fmovies!</footer>

</body>
</html>

here is a ss for your use ,

You Can re-adjust code for color and contain as you like

Sign In

Creating a Table of Images

Recommended Posts

B.Brown2080

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

ishan_shah

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity