Inspiring

Answered

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

Forum|Forum|4 years ago
August 11, 2021
3 replies
6414 views

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>

This topic has been closed for replies.

Correct answer osgood_

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)

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.

B i r n o u

Adobe Expert

Bonjour @AnnShelbourne ,

The set of answers formulated by Os, Nancy, Paul, Ben... are all interesting. But the question I ask myself is, is your code already existing, can you easily modify it or do you have to rely on it to elaborate your cards?

First remark, the code using TABLE is badly formed, starting by using a rather space doctype !!!! and the code in DIV very similar to a nested table... and using the same space doctype.

so , do you need an approach that is based on any of your HTML codes ?

osgood_

Brainiac

Bonjour @AnnShelbourne ,

The set of answers formulated by Os, Nancy, Paul, Ben... are all interesting. But the question I ask myself is, is your code already existing, can you easily modify it or do you have to rely on it to elaborate your cards?

By @B i r n o u

Well I used my approach of grid because you can get the information to 'mimmick' a table by allocating each piece of information a certain row space, which keeps all the information aligned by default (and at least for about 3 text zooms as well), making it cleaner and better presented. Its more complicated but worth it in my opinion. You may well be able to achieve the same effect just using flex and flex: 1, or maybe some other solution. I would not accept either Nancys or Bens solution as at the moment the alignment of information is not as good as it should be or could be, in my opinion, maybe they can tweak that. Pauls solution I havent really looked at in depth as I try to avoid tables but if it works and the alignment of the information is persistant then its a good solution.

Obviously the issue for me, coming from a design background, is I look carefully at the presentation whilst others may accept less as a result of not coming from that kind of background, which is understandable. I see it all the time, whatever will be will be, everyone has different standards of acceptance.

BenPleysier

Adobe Expert

Obviously the issue for me, coming from a design background, is I look carefully at the presentation whilst others may accept less as a result of not coming from that kind of background, which is understandable. I see it all the time, whatever will be will be, everyone has different standards of acceptance.

By @osgood_

As a `Designer`, which do you prefer?

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.

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

BenPleysier

Adobe Expert

I think that Bootstrap 5 would solve the problem very easily

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <!-- New Wappler Page -->
    <link rel="stylesheet" href="css/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>

<body>
    <main>
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 gy-4">
                <div class="col">
                    <div class="card shadow h-100">
                        <div class="card-header text-light bg-primary">
                            Alabama
                        </div>
                        <div class="card-body">
                            <p class="card-text">Southeast Engineering &amp; Custom Components</p>
                            <p class="card-text">Phone: 7X0-3X1-460X</p>
                            <p class="card-text">Fax: ----</p>
                            <p class="card-text">www.sxcxin.xxx</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow h-100">
                        <div class="card-header text-light bg-primary">
                            Arizona
                        </div>
                        <div class="card-body">
                            <p class="card-text">Alan LaFontaine</p>
                            <p class="card-text">Phone: 4X0-96X-6X74</p>
                            <p class="card-text">Fax: 4X0-96X-4X22</p>
                            <p class="card-text">----</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow h-100">
                        <div class="card-header text-light bg-primary">
                            Arkansas
                        </div>
                        <div class="card-body">
                            <p class="card-text">J.L. Gordon and Son, Inc.</p>
                            <p class="card-text">Phone: 9X3-4X5-60X0</p>
                            <p class="card-text">Fax: 9X3-4X5-60X9</p>
                            <p class="card-text">www.jxgoxdonxndsox.com</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow h-100">
                        <div class="card-header text-light bg-primary">
                            California - North
                        </div>
                        <div class="card-body">
                            <p class="card-text">Aregger Associates</p>
                            <p class="card-text">Phone: 4X5-9X7-242X</p>
                            <p class="card-text">Fax: 4X5-9X4-381X</p>
                            <p class="card-text">----</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

The result

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

AnnShelbourneAuthor

Inspiring

Thank you all so much for your most helpful responses. I will work on these tomorrow and will let you know what worked the best.

I have been trying to do it with Flex Cards and while the results look wonderful in Dreamweaver the cards unfortunately seems to fall apart in some of the web browsers.

To answer Nancy:

Unfortunately I don't have the info in a database so it means copying and pasting the text from the Table on their old website!

osgood_

Brainiac

Thank you all so much for your most helpful responses. I will work on these tomorrow and will let you know what worked the best.

By @AnnShelbourne

Look at the posted solutions carefully, some are better than others in terms of the alignment of the information, if thats important to you, others will break if you introduce varying lines of content. There's more to this than meets the eye.

osgood_

Brainiac

Try the code below, fully responsive.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Company Listings</title>
<style>
* {
box-sizing: border-box;
}
.companyInfoWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-gap: 15px;
width: 80%;
margin: 0 auto;
}
@media screen and (max-width: 1100px) {
.companyInfoWrapper {
width: 90%;
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 768px) {
.companyInfoWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.companyInfoWrapper {
grid-template-columns: 1fr;
}
}
.companyInfo {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
border: 1px solid #ccc;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.companyInfo p {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
padding: 5px 0;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
.companyInfo h3:nth-child(1) {
display: flex;
align-items: center;
justify-content: center;
grid-column: 1/2;
grid-row: 1/2;
text-align: center;
margin: 0;
padding: 5px 0;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
.companyInfo p:nth-child(2) {
grid-column: 1/2;
grid-row: 2/3;
}
.companyInfo p:nth-child(3) {
grid-column: 1/2;
grid-row: 3/4;
}
.companyInfo p:nth-child(4) {
grid-column: 1/2;
grid-row: 4/5;
}
.companyInfo p:nth-child(5) {
grid-column: 1/2;
grid-row: 5/6;
}
.companyInfo p:last-child {
border-bottom: none;
}

</style>
</head>
<body>
	
<section class="companyInfoWrapper">
	
<div class="companyInfo">
<h3>Alabama</h3>
<p>Southeast Engineering &amp; Custom Components</p>
<p>Phone: 7X0-3X1-460X</p>
<p>Fax: ----</p>
<p>www.sxcxin.xxx</p>
</div>

<div class="companyInfo">
<h3>Arizona</h3>
<p>Alan LaFontaine</p>
<p>Phone: 4X0-96X-6X74</p>
<p>Fax: 4X0-96X-4X22</p>
<p>----</p>
</div>

<div class="companyInfo">
<h3>Arkansas</h3>
<p>J.L. Gordon and Son, Inc.</p>
<p>Phone: 9X3-4X5-60X0</p>
<p>Fax: 9X3-4X5-60X9</p>
<p>www.jxgoxdonxndsox.com</p>
</div>

<div class="companyInfo">
<h3>California - North</h3>
<p>Aregger Associates</p>
<p>Phone: 4X5-9X7-242X</p>
<p>Fax: 4X5-9X4-381X</p>
<p>----</p>
</div>
</section>
</body>
</html>

osgood_

Brainiac

You can do it using less css/specifically less css grid but it's not as stable if the text is zoomed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Company Listings</title>
<style>
* {
box-sizing: border-box;
}
.companyInfoWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-gap: 15px;
width: 80%;
margin: 0 auto;
}
@media screen and (max-width: 1100px) {
.companyInfoWrapper {
width: 90%;
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 768px) {
.companyInfoWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.companyInfoWrapper {
grid-template-columns: 1fr;
}
}
.companyInfo {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.companyInfo h3 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
.companyInfo p {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
</style>
</head>
<body>
	
<section class="companyInfoWrapper">
	
<div class="companyInfo">
<h3>Alabama</h3>
<p>Southeast Engineering &amp; Custom Components</p>
<p>Phone: 7X0-3X1-46X8</p>
<p>Fax: ----</p>
<p>www.sxccxn.xxx</p>
</div>

<div class="companyInfo">
<h3>Arizona</h3>
<p>Alan LaFontaine</p>
<p>Phone: 4X0-9X6-6X74</p>
<p>Fax: 4X0-9X6-4X22</p>
<p>----</p>
</div>

<div class="companyInfo">
<h3>Arkansas</h3>
<p>J.L. Gordon and Son, Inc.</p>
<p>Phone: 9X3-4X5-60X0</p>
<p>Fax: 9X3-4X5-60X9</p>
<p>www.jlxordxnaxdxon.cxm</p>
</div>

<div class="companyInfo">
<h3>California - North</h3>
<p>Aregger Associates</p>
<p>Phone: 41X-9X7-24X5</p>
<p>Fax: 41X-9X4-38X7</p>
<p>----</p>
</div>
</section>
</body>
</html>

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded