how do I center images in table (html)

Xytriza
October 12, 2023
299 views
0 votes
2 Answers

I’m basically trying to center 3 images in-between the top of 4

and I need the top 3 images to center on above the bottom 4

<div class="supercenter center" id="menuButtons" style="bottom: -15%;">
        <table>
                <tr class="menuButtonList">
                    <td id="menu_create"><a tabindex="1" href=""><img class="menubutton menu-create" src="../assets/category-create.png" title="Create"></a></td>
                    <td><a tabindex="1" href="./leaderboard"><img class="menubutton menu-leaderboard" src="../assets/category-scores.png" title="Scores"></a></td>
                    <td><a tabindex="1" href="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png" title="Saved Levels"></a></td>
                </tr>
                <tr class="menuButtonList">
                    <td id="menu_quests"><a tabindex="1" href=""><img class="menubutton menu-quests" src="../assets/category-quests.png" title="Quests"></a></td>
                    <td id="menu_daily"><a tabindex="1" href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png" title="Daily Level"></a></td>
                    <td id="menu_weekly"><a tabindex="1" href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png" title="Weekly Demon"></a></td>
                    <td><a tabindex="1" href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png" title="Gauntlets"></a></td>
                </tr>
                <tr class="menuButtonList">
                    <td id="menu_featured"><a tabindex="1" href="./search/*?type=featured"><img class="menubutton menu-featured" src="../assets/category-featured.png" title="Featured"></a></td>
                    <td><a tabindex="1" href="./search/*?type=hof"><img class="menubutton menu-hof" src="../assets/category-hof.png" title="Hall Of Fame"></a></td>
                    <td><a tabindex="1" href="./mappacks"><img class="menubutton menu-mappacks" src="../assets/category-packs.png" title="Map Packs"></a></td>
                    <td><a tabindex="1" href="./search"><img class="menubutton menu-search" src="../assets/category-search.png" title="Search"></a></td>
                </tr>
        </table>
</div>

The css class aren’t really touched so don’t worry about that.

I tried using a couple AI stuff like copilot or chatgpt which are too stupid and I tried asking people but didn’t get a response.

Tags: html

Answers

Option One. Add colspans to your existing table:

Your data isn’t really appropriate for table layout but to achieve what you want you will have to modify your table rows to have 12 columns (the lowest common multiple of 3 and 4) and set your cells to span multiple columns. Like so:

table, td {
  border: 1px solid;
  text-align:center;
}

<div class="supercenter center" id="menuButtons" style="bottom: -15%;">
  <table>
    <tr class="menuButtonList">
      <td colspan="4" id="menu_create">
        <a tabindex="1" href=""><img class="menubutton menu-create" src="../assets/category-create.png" title="Create"></a>
      </td>
      <td colspan="4">
        <a tabindex="1" href="./leaderboard"><img class="menubutton menu-leaderboard" src="../assets/category-scores.png" title="Scores"></a>
      </td>
      <td colspan="4">
        <a tabindex="1" href="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png" title="Saved Levels"></a>
      </td>
    </tr>
    <tr class="menuButtonList">
      <td colspan="3" id="menu_quests">
        <a tabindex="1" href=""><img class="menubutton menu-quests" src="../assets/category-quests.png" title="Quests"></a>
      </td>
      <td colspan="3" id="menu_daily">
        <a tabindex="1" href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png" title="Daily Level"></a>
      </td>
      <td colspan="3" id="menu_weekly">
        <a tabindex="1" href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png" title="Weekly Demon"></a>
      </td>
      <td colspan="3">
        <a tabindex="1" href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png" title="Gauntlets"></a>
      </td>
    </tr>
    <tr class="menuButtonList">
      <td colspan="3" id="menu_featured">
        <a tabindex="1" href="./search/*?type=featured"><img class="menubutton menu-featured" src="../assets/category-featured.png" title="Featured"></a>
      </td>
      <td colspan="3">
        <a tabindex="1" href="./search/*?type=hof"><img class="menubutton menu-hof" src="../assets/category-hof.png" title="Hall Of Fame"></a>
      </td>
      <td colspan="3">
        <a tabindex="1" href="./mappacks"><img class="menubutton menu-mappacks" src="../assets/category-packs.png" title="Map Packs"></a>
      </td>
      <td colspan="3">
        <a tabindex="1" href="./search"><img class="menubutton menu-search" src="../assets/category-search.png" title="Search"></a>
      </td>
    </tr>
  </table>
</div>

Option 2. Use Grid or Flexbox instead:

Both CSS Grid and CSS Flexbox can achieve this sort of layout. Here’s an example of one way to achieve it using CSS Grid:

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 5; }
.div2 { grid-area: 1 / 5 / 2 / 9; }
.div3 { grid-area: 1 / 9 / 2 / 13; }
.div4 { grid-area: 2 / 1 / 3 / 4; }
.div5 { grid-area: 2 / 4 / 3 / 7; }
.div6 { grid-area: 2 / 7 / 3 / 10; }
.div7 { grid-area: 2 / 10 / 3 / 13; }
.div8 { grid-area: 3 / 1 / 4 / 4; }
.div9 { grid-area: 3 / 4 / 4 / 7; }
.div10 { grid-area: 3 / 7 / 4 / 10; }
.div11 { grid-area: 3 / 10 / 4 / 13; }

.parent div {
  border: 1px solid;
  text-align: center;
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
  <div class="div9">9</div>
  <div class="div10">10</div>
  <div class="div11">11</div>
</div>

Resources:

The best solution would be to use html FLEX but for table you have two ugly solutions:

1- Nested tables:

td{margin:0;padding:0;text-align:center}
table{border-collapse:collapse}

<table style="width:100%" border="0">
        <tr>
            <td class="subtable">
                <table style="width:100%" border="1">
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%" border="1">
                    <tr>
                        <td>Cell 4</td>
                        <td>Cell 5</td>
                        <td>Cell 6</td>
                        <td>Cell 7</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

2- A table with 12 cells (3 and 4 LCM) and use colspan:

td{text-align:center}

<table style="width:100%" border="1">
  <tr>
    <td colspan="4">1</td>
    <td colspan="4">2</td>
    <td colspan="4">3</td>
  </tr>
  <tr>
    <td colspan="3">4</td>
    <td colspan="3">5</td>
    <td colspan="3">6</td>
    <td colspan="3">7</td>
  </tr>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.