[SOLVED] Tables and Text (HTML5)

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Tables and Text (HTML5)

Post by paulp575 »

Okay, so I've been told me tables are for tabular data. I get it. Now that I'm venturing into new HTML (HTML5), maybe someone can help me mark up a page correctly.

How do you mark up a web page when you want pictures and text (no tabular data) in columns and rows.

For example, this web page: https://ewatv.org/2019-04-27-Trail_Clearing.htm

The top of the page (which should really be in nav) contains a table that is 2 rows high and 3 columns wide. The first and third columns are 2 rows high (the graphics). The text in the middle column is in row # 1 and the menu system in row # 2.

The green box on the bottom is also a table - 3 rows high and 2 columns wide, The first row has text in each columns. Rows # 2 and 3 span both columns.

Also, how do I place the first row of pictures (which are links to videos) into something like what you currently see without using a table? And the 15 pics below it are also in a 5x3 table.

Thanks.
Last edited by paulp575 on Sun Jun 13, 2021 6:35 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Tables and Text (HTML5)

Post by Albert Wiersch »

Hello,

For page layout, there is CSS Flexbox and CSS Grid Layout.

Here's a good page about them if you want to stop using tables for page layout (which I would recommend if you have the time):
Relationship of grid layout to other layout methods
MDN web docs wrote:The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.
I actually just got around to using Flexbox to redesign some of CSS HTML Validator's main page. I was using some tables for page layout for years and I wanted to get rid of them for a long time. I am very happy with the result and the new responsiveness of the page. It took me awhile to figure it out but I think it's working great now.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Tables and Text (HTML5)

Post by paulp575 »

Ugh! Way too much to try to figure out.

I'll stick with using tables for layout.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Tables and Text (HTML5)

Post by Albert Wiersch »

paulp575 wrote: Mon Aug 24, 2020 10:43 am Ugh! Way too much to try to figure out.

I'll stick with using tables for layout.
Yes, that's what I did for a long time... but when I found the time to "play" with it (particularly CSS Flexbox) to get rid of some layout tables, I enjoyed it.

But I can certainly understand wanting to stick with tables, especially if they seem like they've been working well enough.

If you ever get bored though, I do suggest you consider investigating it. You might have some "fun" with it. :D
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply