How To Put a U.S. Zone Chart Table on Your Website

It takes time… (and patience and coffee).

If you are a fellow php developer, or a newbie “do-it-yourself-er”, I will save you time by me sharing the raw HTML code for the Zone Chart Table and will post them below.

Because I woke up on the nice side of the bed this morning.

<start of rant> Scroll way down to <end of rant> to spare you this commercial break, brought to you by the developer.

I spent a couple of billable hours on this U.S. Zone Chart, typing and testing (and double checking with the USPS website to see if the ZIP Codes are right for the sake of the mothership… because, it’s foundational – the way I will code up the shopping cart with the right zones and freight shipping costs, as a percentage of total cart cost, making sure the calculations are correct, depending on the customer destination address, with corresponding formulas according to shipping type. Auto calculations afterwards. But the “base foundation numbers” must be correct.

The customer delivery location (Country, State, ZIP Codes) must be correct on a website’s shopping cart, so the corresponding formulas that Shippers or Shipping Companies charge to deliver the products, can be incorporated and added correctly to the shopping cart totals, plus sales tax, etc. ). Because if this is wrong, and Shipping Costs must be paid, the merchant will have to shoulder the cost. Zzzzzz.

Some clients “question” why some projects take so long – or why there are “so many billable hours”. Those who might not be aware of the actual time it takes, the actual skills required, the patience that’s actually necessary, the over-all efforts that developers or IT Consultants would have to actually have, in order to put in writing the code, testing the code, so that clients can have their smooth-sailing app or website. That would generate “them” income. That is, if they know how to generate traffic to their websites (but that topic is outside of this blog post… setting up a website and a shopping cart is just a starting point. I digressed).

The mind-numbing technical work can sometimes just be overwhelming for those who “do not know” about how these websites and apps get coded up. So I decided to share the raw code below, but also thought in hindsight, having a brief personal note or rant on it might enlighten someone. (Or next time I hear a complaint, I’ll send them a link to this post 🙂 ).

Simplified Explanation:

The simple page Zone Chart is the “Front End”.

The code below is the “Back End”.

<end of rant 🙂 >

So to salute my fellow php developers …. HERE… Scroll on down…. copy and paste. (Of course use at your own risk 🙂 If you find a bug, or a mistake, leave a comment below so I can fix my calculations. Wink, wink.

(And I’ll just put some nice product pictures on the right so that this page doesn’t look so boring… and you might decide to buy after you copy paste the code. LOL! The pictures are clickable linking straight to the product pages on our website. 🙂 )

In case you want to go check out the “Menu” I created – a floating menu at the top right corner – and a floating cart at the bottom right corner of the Shop Pages (viewable when you scroll down on the Shop) – they will keep you company in your journey towards the bottom part of this page. 🙂

Here goes: How To Put a U.S. Zone Chart Table on Your Website

1) This code goes below the <head> section of your page.

<style>
table, td, th { 
border: 1px dotted black;
text-align: left;
}

table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 12px;
}
</style>

2) This code goes below the <body> section of your page.

<h2>The first 3 digits of your destination ZIP Code 
determine the shipping zone.</h2>

<p>For example, if your ZIP Code is "77381", you will 
look at the ZIP Code Prefix Column and find the row 
for "773", which is between "770—789" and you will 
find that on the same row, under Zone, it shows "6", 
so the ZIP Code "77381" is on Zone 6.</p>
<p>On the Freight Chart, Zone 6 shows the corresponding 
Shipping and Handling Costs that are charged by the 
Shipping Company to deliver the products to you.</p>
<p>We have programmed this into our Shopping Cart and 
you can estimate the Shipping and Handling amount for 
your order when you input an address on the "Calculate 
Shipping" fields in your shopping cart.</p>

<table>
<tr>
<th>ZIP Code
Prefix (first 3 digits) </th>
<th>Zone</th>
</tr>

<tr>
<td>004—005</td>
<td>8</td>
</tr>

<tr>
<td>006—007</td>
<td>(AM)</td>
</tr>

<tr>
<td>009</td>
<td>(AM)</td>
</tr> 

<tr>
<td>010—089</td>
<td>8</td>
</tr> 

<tr>
<td>100—306</td>
<td>8</td>
</tr>

<tr>
<td>307</td>
<td>7</td>
</tr>

<tr>
<td>308—324</td>
<td>8</td>
</tr>

<tr>
<td>325</td>
<td>7</td>
</tr>

<tr>
<td>326—339</td>
<td>8</td>
</tr>

<tr>
<td>341</td>
<td>8</td>
</tr>

<tr>
<td>342—349</td>
<td>8</td>
</tr>

<tr>
<td>350—362</td>
<td>7</td>
</tr>

<tr>
<td>363</td>
<td>8</td>
</tr>

<tr>
<td>364—367</td>
<td>7</td>
</tr>

<tr>
<td>368</td>
<td>8</td>
</tr> 

<tr>
<td>369—375</td>
<td>7</td>
</tr>

<tr>
<td>376—379</td>
<td>8</td>
</tr> 

<tr>
<td>380—397</td>
<td>7</td>
</tr>

<tr>
<td>398</td>
<td>8</td>
</tr>

<tr>
<td>399</td>
<td>8</td>
</tr> 

<tr>
<td>400—402</td>
<td>7</td>
</tr>

<tr>
<td>403—418</td>
<td>8</td>
</tr>

<tr>
<td>420—424</td>
<td>7</td>
</tr>

<tr>
<td>425—426</td>
<td>8</td>
</tr>

<tr>
<td>427</td>
<td>7</td>
</tr>

<tr>
<td>430—459</td>
<td>8</td>
</tr>

</table>

<BR>
<BR>

<table>
<tr>
<th>ZIP Code
Prefix (first 3 digits) </th>
<th>Zone</th>
</tr>

<tr>
<td>460—469</td>
<td>7</td>
</tr>

<tr>
<td>470</td>
<td>8</td>
</tr>

<tr>
<td>471—479</td>
<td>7</td>
</tr>

<tr>
<td>480—489</td>
<td>8</td>
</tr>

<tr>
<td>490—491</td>
<td>7</td>
</tr>

<tr>
<td>492</td>
<td>8</td>
</tr>

<tr>
<td>493—495</td>
<td>7</td>
</tr>

<tr>
<td>496—497</td>
<td>8</td>
</tr>

<tr>
<td>498—499</td>
<td>7</td>
</tr>

<tr>
<td>500—503</td>
<td>6</td>
</tr>

<tr>
<td>504</td>
<td>7</td>
</tr>

<tr>
<td>505</td>
<td>6</td>
</tr>

<tr>
<td>506—507</td>
<td>7</td>
</tr>

<tr>
<td>508—516</td>
<td>6</td>
</tr>

<tr>
<td>520—559</td>
<td>7</td>
</tr>

<tr>
<td>560—562</td>
<td>6</td>
</tr>

<tr>
<td>563—564</td>
<td>7</td>
</tr>

<tr>
<td>565</td>
<td>6</td>
</tr>

<tr>
<td>566—567</td>
<td>7</td>
</tr>

<tr>
<td>570—576</td>
<td>6</td>
</tr>

<tr>
<td>577</td>
<td>5</td>
</tr>

<tr>
<td>580—588</td>
<td>6</td>
</tr>

<tr>
<td>590—591</td>
<td>5</td>
</tr> 

<tr>
<td>592—593</td>
<td>6</td>
</tr> 

<tr>
<td>594</td>
<td>5</td>
</tr> 

<tr>
<td>595</td>
<td>6</td>
</tr> 

</table>

<BR>
<BR>

<table>
<tr>
<th>ZIP Code
Prefix (first 3 digits) </th>
<th>Zone</th>
</tr>

<tr>
<td>596—599</td>
<td>5</td>
</tr>

<tr>
<td>600—634</td>
<td>7</td>
</tr>

<tr>
<td>635</td>
<td>6</td>
</tr>

<tr>
<td>636—639</td>
<td>7</td>
</tr>

<tr>
<td>640—649</td>
<td>6</td>
</tr>

<tr>
<td>650—652</td>
<td>7</td>
</tr>

<tr>
<td>653</td>
<td>6</td>
</tr>

<tr>
<td>654—655</td>
<td>7</td>
</tr>

<tr>
<td>656—676</td>
<td>6</td>
</tr>

<tr>
<td>677—679</td>
<td>5</td>
</tr>

<tr>
<td>680—689</td>
<td>6</td>
</tr> 

<tr>
<td>690</td>
<td>5</td>
</tr>

<tr>
<td>691—692</td>
<td>6</td>
</tr>

<tr>
<td>693</td>
<td>5</td>
</tr>

<tr>
<td>700—709</td>
<td>7</td>
</tr>

<tr>
<td>710—711</td>
<td>6</td>
</tr>

<tr>
<td>712—716</td>
<td>7</td>
</tr>

<tr>
<td>717—719</td>
<td>6</td>
</tr>

<tr>
<td>720—725</td>
<td>7</td>
</tr>

<tr>
<td>726—738</td>
<td>6</td>
</tr>

<tr>
<td>739</td>
<td>5</td>
</tr>

<tr>
<td>740—768</td>
<td>6</td>
</tr>

<tr>
<td>769</td>
<td>5</td>
</tr>

<tr>
<td>770—789</td>
<td>6</td>
</tr>

<tr>
<td>790—794</td>
<td>5</td>
</tr>

<tr>
<td>795—796</td>
<td>6</td>
</tr>

</table>

<BR>
<BR>

<table>
<tr>
<th>ZIP Code
Prefix (first 3 digits) </th>
<th>Zone</th>
</tr>

<tr>
<td>797—812</td>
<td>5</td>
</tr>

<tr>
<td>813—815</td>
<td>4</td>
</tr>

<tr>
<td>816—832</td>
<td>5</td>
</tr>

<tr>
<td>833</td>
<td>4</td>
</tr>

<tr>
<td>834—838</td>
<td>5</td>
</tr>

<tr>
<td>840—847</td>
<td>4</td>
</tr>

<tr>
<td>850—851</td>
<td>3</td>
</tr>

<tr>
<td>852</td>
<td>4</td>
</tr>

<tr>
<td>853—854</td>
<td>3</td>
</tr>

<tr>
<td>855—860</td>
<td>4</td>
</tr>

<tr>
<td>863—864</td>
<td>3</td>
</tr>

<tr>
<td>865—874</td>
<td>4</td>
</tr>

<tr>
<td>875—877</td>
<td>5</td>
</tr>

<tr>
<td>878—879</td>
<td>4</td>
</tr>

<tr>
<td>880—885</td>
<td>5</td>
</tr>

<tr>
<td>899—892</td>
<td>3</td>
</tr>

<tr>
<td>893—898</td>
<td>4</td>
</tr>

<tr>
<td>900—933</td>
<td>2</td>
</tr>

<tr>
<td>934—934</td>
<td>3</td>
</tr>

<tr>
<td>935</td>
<td>2</td>
</tr>

<tr>
<td>936—939</td>
<td>3</td>
</tr>

<tr>
<td>940—961</td>
<td>4</td>
</tr>

<tr>
<td>970—975</td>
<td>5</td>
</tr>

<tr>
<td>976</td>
<td>4</td>
</tr>

<tr>
<td>977—986</td>
<td>5</td>
</tr>

<tr>
<td>988—994</td>
<td>5</td>
</tr>

</table>

<h3>Related: Freight Chart
</h3>

Missing row on ZIP 694 to 699? Nope.  Those are invalid 
ZIP codes, I double checked ZIP Codes at 
https://www.usps.com/

Whew! You actually made it down here! Hope this helps you! 🙂

P.S. If you are viewing this on a laptop or tablet, this post should just look okay with the pictures on the right. If you are viewing this on a mobile phone, then the pictures should just adjust accordingly to your phone’s screen size. (Responsive Web Design :-)) If you stumbled upon this blog post and made it all the way down here… well, that might give you an idea on how “tables” on websites are created. I personally prefer this table below. 🙂