Help with HTML/CSS Tables

Report · Jun 13, 2023

I need help creating a table that has colums and rows. Let's say 5 columns.

If i had an item or something to the first place of the top row, then the last item on each row will automatically move to the first on the next row. If that makes sense.

Report · Jun 13, 2023

There are a couple of ways to achieve this and HTML/CSS tables are certainly not included.

You could use CSS Grid, Flexbox or an all in solution using Bootstrap

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jun 13, 2023

That seems wayyyy confusing Here's an example

https://www.sportslogos.net/logos/list_champions/1/NHL/Stanley_Cup_Champions/

Once he puts the Vegas Golden Knights up there for 2023, then the St. Louis Blues (2019) will automatically go to the first spot on the next line, and so forth and so on

Report · Jun 13, 2023

If I understand correctly, your wish is that by adding 2023, 2019 will switch to the next line and so on.

If that's the case, then the approach @BenPleysier proposes is perfectly suited to your needs. Don't use a table that isn't responsive on a smartphone and is too restrictive in terms of scalability.

Stack overflow propose a 4 in a row very simple to be adapted https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row

.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

You'll find more info about flex on CSS Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Report · Jun 13, 2023

The code either doesn't work, or i'm doing it wrong. All 6 "items" are on the same line and when I add another div class child like above, it puts it on the same line.

Report · Jun 14, 2023

I got it to work

<!doctype html>
<html>
<head>
<title>PAGE TITLE</title>

<style type="text/css">



.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}


.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
	
}  
.wrap li {
  background: gold;
	
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}



</style>

</head>

<body>

<ul class="flex-container wrap">
  <li class="flex-item">0</li>
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>


</body>

</html>

. Now I just need everything centered to the middle of the page. I also have a 27" Monitor. So, all 8 of those items fit on my monitor. . Can I make it to where there's only a certain amount of items on one line? Let's say 5 per row?

Report · Jun 14, 2023

In fact the code proposed by stackoverflow works as expected and displays 4 items per row, not 6!

If you need, you can follow it from https://demo.puce-et-media.com/jamedlock83/stackoverflow.html

In terms of your approach, which doesn’t work https://demo.puce-et-media.com/jamedlock83/jamedlock83-1.html, at least that's not a 4 in a row as requested, so without going into too much detail about the overall code... there are a few points to consider

The first-level children of the container displaying flex must be informed of their behavior regarding the space available to them... and so the flex-grow property must be defined

flex-grow: 1;

https://demo.puce-et-media.com/jamedlock83/jamedlock83-2.html

That way, the children will extend to occupy the all width of the parent container, so it's important to define the parent container width to be sure to get the expected layout.

Next, you need to define the amount of space each children has available to itself, one use flex-basis for that purpose, in example, for 4 elements living together on 100%, this means using 25% each.

flex-basis:25%;

https://demo.puce-et-media.com/jamedlock83/jamedlock83-3.html

As you can see, this only displays 3 elements per line, not 4, that is because one have to take into account the fact that you give 5 px padding and 10 px margin to each element (left & right)... so one have to integrate them into the 25%.

flex-basis:calc(25% - (2 *5px) - (2*10px));

(I'm writing in a wordy way to help understanding the operative gymnastics involved)

https://demo.puce-et-media.com/jamedlock83/jamedlock83-4.html

Finaly, to prevent an incomplete row from occupying space in an anarchic way, you can add a limitation, for example max-width

max-width: calc(25% - (2 *5px) - (2*10px));

https://demo.puce-et-media.com/jamedlock83/jamedlock83-5.html

The flex property is also a short form of writing, integrating flex-grow, flex_shrink and flex-basis into a single property and can be used instead...

In any case, don't hesitate to visit https://css-tricks.com/snippets/css/a-guide-to-flexbox

Report · Jun 14, 2023

Surely a simple grid approach is a better solution to use these days as it takes into account the spacing between the columns so no need to do the css calc process but you know that.

If l did use flex ld probably set the flex basis to say 23% and use justify content space between but that will have probably an undesired affect if you end up with one or two boxes on the last row, so grid would be my prefered solution.

Report · Jun 14, 2023

Yes, I quite agree with you, indeed, as @BenPleysier advocated, Grid would be another approach.

In fact, a more modern solution, certainly simpler... but well this morning I was in the mood flex, and it does the job well too, and remains very precise through the use of calc()... after that, tea or coffee ! Anyway, as I said, I agree with you.

Report · Jun 14, 2023

Now I just need everything centered to the middle of the page. I also have a 27" Monitor. So, all 8 of those items fit on my monitor. . Can I make it to where there's only a certain amount of items on one line? Let's say 5 per row?
By jamedlock83

Sorry, in the previous comment I forgot to take this last request into account.
To do this, and as mentioned in the previous comment, everything happens at the level of the parent container, to which you need to assign a defined width, say 75%. Then, by playing with the margins, you can center this element.

All you need to do is add the following properties to the .flex-container rule;

.flex-container {
    /* all the others properties */
    width:75%;
    margin:0 auto;
}

You can get an idea by visiting this last link https://demo.puce-et-media.com/jamedlock83/jamedlock83-6.html.

As the example is based on your online site, which contains 4 elements per row, I leave it to you to modify the code to obtain 5 elements per row.

Hope that helps.

Report · Jun 14, 2023

5 elements per row would be 20%. This is exactly what I'm needing. I may be back for more help 🙂 Thank you all for your help

Report · Jun 15, 2023

Exactly, but don't forget that you'll have to subtract the padding and margin (right and left) applied to child elements from this 20%.

Report · Jun 14, 2023

How would I make the text smaller, and align at the top, instead of center, etc?

Report · Jun 15, 2023

Once again, I'm not taking into account the totality of your code, so I'll just cut to the chase.

Currently, the child elements impacted by flex-based layout are list elements (LI) that contain only text. Therefore, impacting the LI element affects the text.

Please note that LI elements can contain any type of tag, https://w3c.github.io/html-reference/li.html (permited contents - flow content) therefore https://w3c.github.io/html-reference/common-models.html#common.elem.flow.

So if you make any structural changes to the content of your LI elements, you'll need to take this into account and reflect it in your CSS rules.

That said, to change the text size, you've applied the .flex-item rule to your list items, and set the font-size property to 2em, well simply modify it to change the size of your text, for example :

font-size: 1em

Next, concerning the alignment of your text on the upper part of the container... the problem comes from the fact that, still in the .flex-item's rule, you assign a fixed height to your list elements, which is set to 100px, and then you specify a text line height also equal to 100px,

line-height: 100px;

so that the written text occupies 100px between its ascender and descender... in other words, it's centered vertically...

If you remove this property, then your text will be placed on the upper part of its own container, at least respecting its default line height and display.

/*line-height: 100px;*/

https://demo.puce-et-media.com/jamedlock83/jamedlock83-7.html

Help with HTML/CSS Tables

li.media.uploader-dialog.title