How to use a range of items and distribute them evenly in a html table?

support
1

Hello,

I have a range of countries and flags. I would like to show 5 countries and their respective flags in one table row. Then the next 5 into the next row etc. How can I achieve that?

I have managed to just pick the first five countries with their respective flags and put them on the first row. But I don’t know how to continue.

<table>
              <tr>
              {{ range $index, $element := .countries }}
              {{$path := printf "images/%s" .ci}}
              {{$path :=  $path|lower|absURL }}
              {{if lt $index 5 }}
                <th>
                  <picture>
                    <source srcset="{{print $path ".webp"}}" type="image/webp">
                    <source srcset="{{print $path ".png"}}" type="image/png">
                    <img class="img-fluid" src="{{print $path ".png"}}" alt="{{ .t }}">
                  </picture>
                </th>
                <th>
                  <span>{{ .c | markdownify }}</span>,
                </th>
                {{ end }}
              {{end}}
              </tr>
</table>

Thanks

2

To dect “row changes” you need to use mod or modBool, e.g.

{{ if (modBool (add $index 1) 5) }}
{{ end }}

Or something like that …

3

Thanks. Not sure how I should do that.

I tried it like this and I get 6 rows and two columns.

<table>
              {{ range $index, $element := .countries }}
              {{$path := printf "images/%s" .ci}}
              {{$path :=  $path|lower|absURL }}
              {{ if (modBool (add $index 1) 5) }}
              <tr>
                <th>
                  <picture>
                    <source srcset="{{print $path ".webp"}}" type="image/webp">
                    <source srcset="{{print $path ".png"}}" type="image/png">
                    <img class="img-fluid w-50" src="{{print $path ".png"}}" alt="{{ .t }}">
                  </picture>
                </th>
                <th>
                  <span>{{ .c | markdownify }}</span>,
                </th>
              </tr>
              {{ end }}
              {{end}}
            </table>
4

If the condition is true, you output tr element. What do you do if the condition is false?

Why do you use th elements in the tr although the content of the th are not headings?

5

To be perfectly honest, it’s not that simple. Look at my comment inside the code:

Because in that else condition that you mentioned, it should start with a new row and carry on, but how?
Right now, this code picks every fifth entry and add it to a column.

<table>
              <tr>
              {{ range $index, $element := .countries }}
              {{$path := printf "images/%s" .ci}}
              {{$path :=  $path|lower|absURL }}
              {{ if (modBool (add $index 1) 5) }}
                <th>
                  <picture>
                    <source srcset="{{print $path ".webp"}}" type="image/webp">
                    <source srcset="{{print $path ".png"}}" type="image/png">
                    <img class="img-fluid w-50" src="{{print $path ".png"}}" alt="{{ .t }}">
                  </picture>
                </th>
                <th>
                  <span>{{ .c | markdownify }}</span>,
                </th>
                {{ else }}
                  ## Should start a new row, but how? It's already inside a TR
                {{ end }}
              {{end}}
              </tr>
            </table>

Unless I copy the whole section and do a new row with a lower ModBool value.

About the TH in a TR, I think TH defines the column. Even without heading, it’s useful for structuring the data.

6

Simple stuff first: th is “table heading”. What you call “column” would be td, aka “table data”.

Now for the rest. You want to have a new row starting over every five items. I’d do it by first collecting five country-image pairs in one or two separate data structures – that happens in the else part. Using either two slices or one slice of dicts (there doesn’t seem to exist a slice of slices data structure in Hugo). Now, in the if modBool (add $index 1) 5) part, I’d output the stuff in the slice(s) built in the else branch (and empty them again) into a tr element, using again a range.

It is possible to do it differently, without adding another slice(s). But then you’d have to take care of opening and closing tr tags, which is a PITA.

BTW: In 2022, a table might not be the best choice here for syntactical reasons. You might want to look at grid and flex containers, given that your data is not really tabular.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.