Need to change an HTML Table into a Responsive format (possibly using Flex).

Report · Aug 11, 2021

I currently have a massive document occupying a succession of 13 HTML Tables.

Each Table is divided into 4 columns with 5 Rows containing text in each Column.

I need to re-code all of this information into a Responsive Layout so that each Sales Rep (plus their address etc) is contained in a single Flex item or card; and the Items will Wrap when viewed on small devices.

Would anyone be able to point me in the right direction and tell me how best to pack this massive table into a Responsive layout?

Flex-wrap seemed to be a possible method but I haven’t discovered a way to make the Flex-items into Parents holding Children consisting of formatted Text boxes.

I would be incredibly grateful if anyone would have time to look at the attached HTML codes and perhaps provide me with a Snippet of coding using Flex which I could use.

I have left the following Table (empty of text but in position) so that you can get some idea of how this monstrous 13-Table document currently unfolds.

I have also converted the HTML Table into DIVs (which should make it easier to use in Flex Items?) and I am attaching that version as well.

This is the original HTML Table:

<!doctype html5>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
</head>
<body>
	<br><br><br>
<td align="center" valign="top" width="20" height="100"></td>
				<td width="875" height="100" align="center" valign="top">
					<div align="center">
	<a id="reps_top_page_anchor" name="reps_top_page_anchor"></a></div>
</td>
	

<br>
<tr align="center" height="51">
				<td class="subhead_2" align="center" valign="top" width="875" height="51">
	
				</td>
			</tr>
			<tr height="51">
				<td class="subhead_2" align="left" valign="top" width="875" height="51">
					<table width="875" border="2" cellspacing="3" cellpadding="3" align="left" height="156">
						<tr>
							<td align="center" valign="top" width="205">
		<p><span class="Reps_table_Bold"><span>Alabama</span></span></p>
							</td>
		<td align="center" valign="top" width="205">
	<p><span class="Reps_table_Bold"><span>Arizona</span></span></p>
							</td>
	<td align="center" valign="top">
		<p><span class="Reps_table_Bold"><span>Arkansas</span></span></p>
							</td>
			<td align="center" valign="top" width="205">
		<p><span class="Reps_table_Bold"><span>California - North</span></span></p>
		</td></tr>
						
<tr>
		<td align="center" width="205">
	<p>Southeast Engineered &amp; Custom Components</p>
		</td>
	<td class="Reps_table" align="center" width="205">
		<p><span>Alan LaFontaine</span></p>
	</td>
	<td class="Reps_table" align="center">
		<p>J.L. Gordon and Son, Inc.</p>
	</td>
		<td class="Reps_table" align="center" width="205">
	<p>Aregger Associates</p>
	</td></tr>
						
	<tr>
	<td align="center" width="205">
		<p>Phone: 770-331-4608</p>
	</td>
	<td class="Reps_table" align="center" width="205">
		<p>Phone: 480-966-6074</p>
	</td>
<td class="Reps_table" align="center">
	<p>Phone: 903-465-6080</p>
</td>
		<td align="center" width="205">
		<p>Phone: 415-927-2425</p>
	</td></tr>
						
<tr>
<td align="center" width="205">
		<p>Fax: </p>
</td>
	<td class="Reps_table" align="center" width="205">
<p>Fax: 480-966-4522</p>
</td>
	<td class="Reps_table" align="center">
		<p>Fax: 903-465-6089</p>
</td>
<td align="center" width="205">
<p>Fax: 415-924-3817</p>
	</td>
	</tr>
	<tr>
	<td align="center" valign="middle" width="205">
	<p align="center"><a href="http://www.seccinc.net" target="blank"><span class="Reps_sites"><span>www.seccinc.net</span></span></a></p>
</td>
<td class="Reps_table" width="205">
		<p align="center">----</p>
</td>
		<td>
<p align="center"><a href="http://www.jlgordonandson.com" target="_blank"><span class="Reps_sites">www.jlgordonandson.com</span></a></p>
	</td>

		<td width="205">
		<p align="center">----</p>
	</td>
	</tr>
	</table>
</td></tr>
	
	
	<tr height="51">
<td class="subhead_2" align="left" valign="top" width="875" height="51">
		<table width="875" border="2" cellspacing="3" cellpadding="3" align="left" height="156">
	<tr>
<td align="center" valign="top" width="205">
	
</td></tr>
	</table></td></tr>
	</body></html>

And this is the same Table converted to DIVs:

<!doctype html5>
<html>
<head>
<meta charset="UTF-8">
<title> Sales Representativest</title>
<link href="../style/DIV-Table.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n4:default.js" type="text/javascript"></script>
</head>
	
	<body>

<div align="center"><a id="reps_top_page_anchor" name="reps_top_page_anchor"></a></div>

<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
<p><span class="Reps_table_Bold">Alabama</span></p>
</div>
<div class="divTableCell">
<p><span class="Reps_table_Bold">Arizona</span></p>
</div>
<div class="divTableCell">
<p><span class="Reps_table_Bold">Arkansas</span></p>
</div>
<div class="divTableCell">
<p><span class="Reps_table_Bold">California - North</span></p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p>Southeast Engineered &amp; Custom Components</p>
</div>
<div class="divTableCell">
<p>Alan LaFontaine</p>
</div>
<div class="divTableCell">
<p>J.L. Gordon and Son, Inc.</p>
</div>
<div class="divTableCell">
<p>Aregger Associates</p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p>Phone: 770-331-4608</p>
</div>
<div class="divTableCell">
<p>Phone: 480-966-6074</p>
</div>
<div class="divTableCell">
<p>Phone: 903-465-6080</p>
</div>
<div class="divTableCell">
<p>Phone: 415-927-2425</p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p>Fax:</p>
</div>
<div class="divTableCell">
<p>Fax: 480-966-4522</p>
</div>
<div class="divTableCell">
<p>Fax: 903-465-6089</p>
</div>
<div class="divTableCell">
<p>Fax: 415-924-3817</p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p align="center"><a href="http://www.seccinc.net" target="blank"><span class="Reps_sites">www.seccinc.net</span></a></p>
</div>
<div class="divTableCell">
<p align="center">----</p>
</div>
<div class="divTableCell">
<p align="center"><a href="http://www.jlgordonandson.com" target="_blank"><span class="Reps_sites">www.jlgordonandson.com</span></a></p>
</div>
<div class="divTableCell">
<p align="center">----</p>
</div>
</div>
</div>
</div>

Report · Aug 12, 2021

I'm a fast learner as this certifies:
But how can I not be with such a great mentor following my every move.

By @BenPleysier

Ha! ha! I'd rather say I'm thorough or try to be but often fail.

On a serious note have you zoomed your latest solution in the browser about 4 times? Does the text start overlapping in the first box? It does in mine, Firefox. I dont know what is causing that as I thought setting a height in em would grow. I doubt anyone would zoom 4 times so it shouldnt be an issue - I stress test lol

Report · Aug 12, 2021

As a `Developer`, I can create the latter in less than 10 minutes and I'll be enjoying my cognac and cigar while you are wading through and testing the CSS.

By @BenPleysier

With some much needed art direction!!

Report · Aug 19, 2021

I was asked by Adobe to check a "correct answer" but you are only allowed to select one correct answer which is not appropriatehere when all of the proffered solutions worked!

The real key point to making this work was Osgood's: "Use min-height instead of height".

I have used the Card approach (but with the placing of an image in the li which follows the Header li) for other pages which need to display multiple panels in a Responsive manner.

With that magic addition of "Use min-height instead of height", the images (plus their attendant Text in both the Card Header and in the li element below the image) now stay to gether; do not re-size themselves; and display in a Responsive flow across various devices.

I would never have achieved this without the help and code snippets which you all gave me so generously.

Report · Aug 19, 2021

One more thing: if you use images in the way which I described, those images need to be pre-cropped and re-sized so that they all have the same dimensions.

Report · Aug 20, 2021

the problem that arises when an algorithm must crop an image to a given dimension (or let a portion of the image appear while hiding the other), lies on the random aspect of this 'cutting'. No pictorial consistency will be respected, unless a visual recognition tool is used to adjust the cut.

Another alternative is to propose a cropping utility to the user... which is less obvious in batch or automatic processing.

Of course, there are CSS-based solution, where this article on CSS-Tricks brings some interesting notions.
https://css-tricks.com/crop-top/ as using a background image to a block and dealing with the overflow.

you can find another approach on https://developer.mozilla.org/en-US/docs/Web/CSS/clip where the image itself recieve a mask that will let appear what we like to.

the two approaches differ in that in one the image is integrated into the HTML structure (the second), while the other only uses the image through CSS (the first)

Report · Aug 20, 2021

I don't think the OP is talking about automated upload/resize and cropping required areas of the images. They are pointing out IF the images are NOT sized exactly the same then the information will not be aligned as the variation in the height of the images will determine the alignment of the other 'cells'.

I could be wrong but that's the way I read it.

Report · Aug 20, 2021

I read the same interpretation.

The fact being that Ann's tables contain contact data, I rather thought that the images were likely to be bigger than the allocated space. hence my idea of using CSS, either for images embedded in the content, or for background images.

it's true, as you notice, that if the images are smaller, that may effectivly cause trouble, however it should work for background images, but one should certainly add a CSS oversizing for images embedded in HTML

as well as a min-height is used, perhaps using a min-width

Report · Aug 20, 2021

I think the OP will have to confirm what they mean. Are they using min height on the cell the images are in or the cell which contains the text information.

I think maybe on the cell the text information is in so if the amount of text lines vary it keeps all the cells in that row to the same depth. Im not really sure where the images come into play. I should imagine they have been precropped to the same and correct size so the cell that they are in is determined by the image height and not setting a min height.

Maybe, l dont know. It was the way all the relevant solutions offered here used, eventually.

Report · Aug 21, 2021

That is exactly right!

Adding that min-height to the .css seems to retain the spacing and sixe but I found that the images must be constrained to the correct ratios for height versus width or it falla apart.

My code does seem to be working with several browsers and on various devices but later tests will determine if all is truly well when I am further along in this project (which has seven main pages with a number of linked subsidiaries to each)

Report · Aug 20, 2021

As an alternative to what @B i r n o u has suggested, have a look at https://imagekit.io/blog/image-optimization-resize-aws-s3-imagekit/

Wappler, the only real Dreamweaver alternative.

Report · Aug 20, 2021

I am trying to post a reply and a screen shot too; but the forum is not accepting it!

Report · Aug 20, 2021

Report · Aug 20, 2021

OK!!

THAT was the screenshot — now I will attempt to repost the text

Report · Aug 20, 2021

Can a Forum host clean this up for me?

"Your content was last auto-saved at 7:09 PM"

The system won't let me delete my earlier attempt to post and it blocks e from re-posting the same message!!

The picture makes little sense without the text!!!

Report · Aug 21, 2021

What happens though if the text in the yellow header takes up 2 lines as a result of the name of the product being longer? Whilst the suggested solution was to use min height it wasnt suggested that it should be used on the 'card' itself but on the container or containers which might contain varying lines of text.

Difficult to tell if it works or not without access to the full code.

Report · Aug 21, 2021

I am having great difficulty posting here!

I hit "Post" and nothing gets posted so I hit "Post"magain and am told that I have reposted!

My messages are not getting posted and they take me a long time to type because typing is not one of my skills!

------

Re. your last message:

That doesn't happen!

I write the copy and I always write it (or adjust names etc.) to fit my design. If something really had to be longer, I would adjust my layout (or change the Font) to accommodate it.

I actually am in the almost unique and enviable position of being the Photographer, the Copy Writer, and the Art Director on all of our productions — whether for Print or the Internet. It's a symbiotic process: I am writing Copy (in my head!) while I am photographing the product and talking about marketing to the client at the same time. The whole production just sort of unfurls from there!

-

Report · Aug 21, 2021

I am having great difficulty posting here!

=========

Ann,

Use another browser. Or keep your replies short. If you meander over a post for a long time (I sometimes do when called away by other things), the system times out. Just highlight and copy (Ctrl + C) the reply and hit F5 to refresh your screen.

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 21, 2021

I write the copy and I always write it (or adjust names etc.) to fit my design. If something really had to be longer, I would adjust my layout (or change the Font) to accommodate it.

By @AnnShelbourne

Without actually testing the code, it seems that the alignment of the information would break if the text was resized by the end user in their brower. You might be able to control what you see in your browser/s but you can't control what others are seeing or doing in their browsers. Will it matter much IF the alignment breaks, not really but it can be avoided by setting the structure up correctly.

Unfortunately the forum software isnt that stable. I have a lot of issues with it too, especially on mobile devices and even on desktop devices it will go nuts at times with its 'flood posting warning' or 'corrupt code' messages when there doesnt seem to be any, which can be very frustrating, time consuming and a waste of valuable time. I think this happens more when you copy and paste. I can only apologise on behalf of Adobe for the inconvenience its causing you.

Report · Aug 21, 2021

I am having great difficulty posting here!
By @AnnShelbourne

In fact I often have the same problem than you have... it is not really linked to the type of browser that you use, personnaly, I have two browsers dedicated to forums, and it hapens no matter which one it is...

I have remarked that it happen, when page hasn't be reload and stay open on the browser too long... so before posting I'm used to hit F5 just before, and it seams that it clean the problem of posting, copying, blocking and so on... so try to not let the page loaded static too long.

I'm not sure that my english is clean, so if I'm not clear, please, let me know...

Report · Aug 21, 2021

I am still seeing "auto-saved . . . load or discard" but the System will neither load nor dicard!

And this is 12 hours later; on a different Browser; and with a new Adobe sign-in!

Oh well , i tried . . .

😞

Report · Aug 21, 2021

I am still seeing "auto-saved . . . load or discard" but the System will neither load nor dicard!
And this is 12 hours later; on a different Browser; and with a new Adobe sign-in!

Oh well , i tried . . .
😞

By @AnnShelbourne

No worries, you seem happy with how you have everything set up on your webpage so that is the main thing, onwards and upwards.

Adobe Community

Need to change an HTML Table into a Responsive format (possibly using Flex).

2 Correct answers