How-to: HTML page layout Friday, 06 March 2026 @ 23:25:23
<h1 style='color:red; font-weight:bold; text-align:center;'>Reference Master Page</h1>

Reference Master Page

This page shows the master page template code for reference. Nothing here executes — it’s all text.


<?php
	// ======================
	// MASTER PAGE TEMPLATE  
	// Safe, simple structure
	// ======================

	// =========================================================================================================
	// STEP 1: Host detection: START of logic to determine WHERE this page is being run from (Abyss or A2Hosting
	// =========================================================================================================
		$jmm_file_exists_on_abyss     = 'D:/Web/_common/_globals/this_file_is_on_abyss.txt'							;
		$jmm_file_exists_on_a2hosting = '/home/panauro1/public_html/common/_globals/this_file_is_at_a2_hosting.txt'	;
?>

<!DOCTYPE html>

<HTML lang="en">

	<HEAD>

		<META charset="UTF-8">

		<TITLE> <?php echo $page_title; ?> </title>

		<!-- IF the CSS is in an EXTERNAL file, include the following line here to call that CSS file -->
		<LINK rel="stylesheet" href="https://<?php echo $_SERVER['SERVER_NAME'];?>/common/_jmm_css/airports_listing_global_array.css.php">

		<!-- IF the CSS is INTERNAL on this page, include the CSS here on this page, SIMILAR to the following -->
		<STYLE>
			/* Overall table */
				.airportTable {
					border-collapse	: collapse							;
					font-family		: Arial, sans-serif					;
					font-size		: 14px								;
					text-align		: left								;
					width			: auto								;	/* or 100% if you prefer */
				}

			/* Header */
				.airportTable thead th {
					background-color: grey								;
					color			: #ffffff							;
					font-weight		: 600								;
					padding			: 5px 10px							;
					text-align		: center							;
					transition		: background-color 0.2s ease-in-out	;
				}
		</style>

	</head>

	<BODY>

		<SECTION class="page-includes">
			<?php
				// ============================================
				// Files & includes needed for this page to run
				// ============================================
					if (file_exists($jmm_file_exists_on_abyss)) {
							include 'D:/Web/_common/_globals/jmm_global_code_red-button.php'										;
							include 'D:/Web/_common/_globals/jmm_global_header-v2.php'											;
						//	include 'D:/Web/_common/_globals/jmm_global_header-v2_maintenance-mode.php'							;
							include 'D:/Web/_common/_globals/jmm_my_local_wan_ip.php'											;
					} elseif (file_exists($jmm_file_exists_on_a2hosting)) {
							include '/home/panauro1/public_html/common/_globals/jmm_global_code_red-button.php'					;
							include '/home/panauro1/public_html/common/_globals/jmm_global_header-v2.php'						;
						//	include '/home/panauro1/public_html/common/_globals/jmm_global_header-v2_maintenance-mode.php'		;
							include '/home/panauro1/public_html/common/_globals/jmm_my_local_wan_ip-v2.php'						;
					} else {
							die('');
					}
			?>
		</section>

		<h2 style="color:red; font-weight:bold; text-align:center;">Reference Master Page</h2>

		<DIV class="airport-section">	<!-- Using this <div>, TABLES can nicely be grouped together -->

			<!-- ======================================= -->
			<!-- There are 3 formats for <table> layouts -->
			<!-- ======================================= -->

			<!-- IF the entire TABLE is in this SINGLE FILE, continue with the ROWS and COLUMNS here on this page. -->
			<TABLE>
				<THEAD>
					<TR>
						<TH> </th>	<!-- Just for display, using $counter_airports++ ... NEVER sortable -->
						<TH class="sortable sort-text"		data-type="text"	data-col="country">		Country			</th>
						<TH class="sortable sort-text"		data-type="text"	data-col="state">		State/Province	</th>
						<TH class="sortable sort-text"		data-type="text"	data-col="city">		City			</th>
						<TH class="sortable sort-text"		data-type="text"	data-col="airport">		Airport			</th>
						<TH class="sortable sort-text"		data-type="text"	data-col="icao">		ICAO			</th>
						<TH class="sortable sort-text"		data-type="text"	data-col="iata">		IATA			</th>
						<TH class="sortable sort-text"		data-type="text"	data-col="faa">			FAA				</th>
						<TH class="sortable sort-number"	data-type="number"	data-col="landings">
							<i class="fa-solid fa-plane-arrival"></i>
						</th>
						<?php
							if
								($_SERVER['REMOTE_ADDR'] == $jmm_my_local_wan_ip) { ?>
									<TH 					data-type="text"	data-col="latitude">	Latitude		</th>	<!-- NOT sortable -->
									<TH 					data-type="text"	data-col="longitude">	Longitude		</th>	<!-- NOT sortable -->
						<?php
							}
						?>
					</tr>
				</thead>

				<TBODY>
					<TR>
						<TD>
							This is column 1
						</td>
					</tr>
				</tbody>

				<!-- ===================================================================================================================================== -->
				<!-- IF Javascript manipulates anything in my <table>, like sorting columns, then Javascript goes here, INSIDE the table, BEFORE </table>. -->
				<!-- ===================================================================================================================================== -->

				<!-- Next, IF Javascript is INTERNAL, use this format -->
				<SCRIPT>
					// Script for searching
						document.addEventListener("DOMContentLoaded", function() {
							
							const table = document.querySelector(".airportTable");
							if (!table) return;
							
							const tbody = table.querySelector("tbody");
						});
				</script>

				<!-- IF the <script> is EXTERNAL, use this format -->
				<SCRIPT src="https://<?php echo $_SERVER['SERVER_NAME']; ?>/common/_jmm_js/myScript.js">			</script>
				<SCRIPT src="https://<?php echo $_SERVER['SERVER_NAME']; ?>/common/_jmm_js/anotherScript.js">		</script>
				<SCRIPT src="https://<?php echo $_SERVER['SERVER_NAME']; ?>/common/_jmm_js/andAnotherScript.js">	</script>
			</table>

			<!-- IF the TABLE spans another or more files, START the table here on this page, then call the other files. -->
			<TABLE>
				<?php
					// =========================================================================================
					// Ensure that EACH external page begins ONLY with <tr> at the top, and </tr> at the bottom.
					// =========================================================================================
						if (file_exists($jmm_file_exists_on_abyss)) {
							include 'D:/Web/_common/_pages/page02.php'						;
							include 'D:/Web/_common/_pages/page03.php'						;
							include 'D:/Web/_common/_pages/page04.php'						;
						} elseif (file_exists($jmm_file_exists_on_a2hosting)) {
							include '/home/panauro1/public_html/common/_pages/page02.php'	;
							include '/home/panauro1/public_html/common/_pages/page03.php'	;
							include '/home/panauro1/public_html/common/_pages/page04.php'	;
						} else {
							die('');
						}
				?>
			</table>




<!-- ========================================================================================================================================================================================================= --> <!-- IF Javascript does NOT manipulate anything in my <table> (example: messages, widgets, animations unrelated to the <table>), then Javascript goes near the bottom of the entire page, just before </body>. --> <!-- ========================================================================================================================================================================================================= --> <!-- Next, IF Javascript is INTERNAL, use this format --> <SCRIPT> // Script for searching document.addEventListener("DOMContentLoaded", function() { const table = document.querySelector(".airportTable"); if (!table) return; const tbody = table.querySelector("tbody"); }); </script> <!-- IF the <script> is EXTERNAL, use this format --> <SCRIPT src="https://<?php echo $_SERVER['SERVER_NAME']; ?>/common/_jmm_js/myScript.js"> </script> <SCRIPT src="https://<?php echo $_SERVER['SERVER_NAME']; ?>/common/_jmm_js/anotherScript.js"> </script> <SCRIPT src="https://<?php echo $_SERVER['SERVER_NAME']; ?>/common/_jmm_js/andAnotherScript.js"> </script>
</div> </body> </html>
=============================================================

Table Format 1, JS Placement A

This is a “bubble” for your first table/JS scenario.

Header 1Header 2
Data 1Data 2

Table Format 1, JS Placement B

Second variation for Format 1.

Header 1Header 2
Data AData B

Table Format 2, JS Placement A

Third scenario.

Header XHeader Y
Data XData Y
20,977 unique visits

FusionWings.com © Copyright 2008-2026 by John Mark Motyer, CD [8.4.15]