Most effective way of implementing tables
Permalink March 12, 2017 at 9:52 PM
Right now I am working on how to access my radio shows in an efficient and practical manner. I have created seperate pages for each year. Each year contains my shows in table format. Is this the best way to go? Reducing page load etc... or should I create one large table in a single document that contains every year of my show?
Also, would blocks play a role here? A seperate block for each year? I tried Wordpress for the past couple of weeks so I am looking for what is out there that will suit my needs. I tried using an iframe but I found that slowed down the page considerably. I don't mind hand coding this as I find I am learning a great deal.
In a seperate post it was suggested that I convert my pdf files (which displayed my weekly radio playlists), to html tables instead. This has been going very well and I find I now have more flexibility.
You will see the grid I set up on the home page. sd.mcran.com/concrete5
Thanks for the feedback and suggestions.
<! DOCTYPE html>
< html>
< head>
< style>
table. tableizer- table {
font- size: 10px;
border: 2px solid #CCC;
font- family: Arial, Helvetica, sans- serif;
table- layout: auto;
margin- left: auto;
margin- right: auto;
width: 200px;
text- align: center;
}
. months {
<! DOCTYPE html>
< html>
< head>
< style>
table. tableizer- table {
font- size: 10px;
border: 2px solid #CCC;
font- family: Arial, Helvetica, sans- serif;
table- layout: auto;
margin- left: auto;
margin- right: auto;
width: 200px;
text- align: center;
}
. months {
font- size: 10px;
font- family: Arial, Helvetica, sans- serif;
table- layout: auto;
margin- left: auto;
margin- right: auto;
}
. centerTable { margin: 0px auto; }
. tableizer- table td {
padding: 7px;
margin: 6px;
border: 1px solid #CCC;
}
. tableizer- table th {
background- color: #298DB9;
color: #000;
font- weight: bold;
height: 20px;
font- size: 14px;
}
. title {
font- size: 10px;
text- align: center;
text- decoration: none;
text- align: center;
color: black;
}
. title2 {
font- size: 12px;
text- align: center;
text- decoration: none;
text- align: center;
color: black;
}
. title3 {
font- size: 10px;
text- align: center;
text- decoration: none;
text- align: center;
color: black;
padding: 10px;
}
hr { color: #298DB9;
background- color: #298DB9;
height: 5px;
}
. title4 {
font- size: 12px;
text- align: center;
text- decoration: none;
text- align: center;
color: black;
padding: 8px;
}
a { text- decoration: none; color: black; }
. audio {
text- align: center;
}
ul li { font- size: 10px}
</ style>
</ head>
< body>
< hr align= "center" width= "100%" >
< table class = "months" class = "centerTable" >< a name= "home" >
< tbody>
< tr>
< td class = "title4" >< a href= "#jan2017" > 2017 </ a></ td>
< td class = "title4" >< a href= "#jan2016" > 2016 </ a></ td>
< td class = "title4" >< a href= "#jan2015" > 2015 </ a></ td>
< td class = "title4" >< a href= "#jan2014" > 2014 </ a></ td>
< td class = "title4" >< a href= "#jan2013" > 2013 </ a></ td>
< td class = "title4" >< a href= "#jan2013" > 2012 </ a></ td>
< td class = "title4" >< a href= "#jan2013" > 2011 </ a></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#jan2017" > Jan</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#jan2016" > Jan</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#jan2015" > Jan</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#jan2014" > Jan</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#jan2013" > Jan</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#jan2012" > Jan</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#jan2011" > Jan</ a></ td>
< td></ td>
< td></ td>
< td></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#feb2017" > Feb</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#feb2016" > Feb</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#feb2015" > Feb</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#feb2014" > Feb</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#feb2013" > Feb</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#feb2012" > Feb</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#feb2011" > Feb</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#mar2017" > Mar</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#mar2016" > Mar</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#mar2015" > Mar</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#mar2014" > Mar</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#mar2013" > Mar</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#mar2012" > Mar</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#mar2011" > Mar</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#apr2017" > Apr</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#apr2016" > Apr</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#apr2015" > Apr</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#apr2014" > Apr</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#apr2013" > Apr</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#apr2012" > Apr</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#apr2011" > Apr</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#may2017" > May</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#may2016" > May</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#may2015" > May</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#may2014" > May</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#may2013" > May</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#may2012" > May</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#may2011" > May</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#jun2017" > June</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#jun2016" > June</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#jun2015" > June</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#jun2014" > June</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#jun2013" > June</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#jun2012" > June</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#jun2011" > June</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#jul2017" > Jul</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#jul2016" > Jul</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#jul2015" > Jul</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#jul2014" > Jul</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#jul2013" > Jul</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#jul2012" > Jul</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#jul2011" > Jul</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#aug2017" > Aug</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#aug2016" > Aug</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#aug2015" > Aug</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#aug2014" > Aug</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#aug2013" > Aug</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#aug2012" > Aug</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#aug2011" > Aug</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#sep2017" > Sep</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#sep2016" > Sep</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#sep2015" > Sep</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#sep2014" > Sep</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#sep2013" > Sep</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#sep2012" > Sep</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#sep2011" > Sep</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#oct2017" > Oct</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#oct2016" > Oct</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#oct2015" > Oct</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#oct2014" > Oct</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#oct2013" > Oct</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#oct2012" > Oct</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#oct2011" > Oct</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#nov2017" > Nov</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#nov2016" > Nov</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#nov2015" > Nov</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#nov2014" > Nov</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#nov2013" > Nov</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#nov2012" > Nov</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#nov2011" > Nov</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
< tr>
< td class = "title3" >< a href= "http://sd.mcran.com/2017.htm#dec2017" > Dec</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2016.htm#dec2016" > Dec</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2015.htm#dec2015" > Dec</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2014.htm#dec2014" > Dec</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2013.htm#dec2013" > Dec</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2012.htm#dec2012" > Dec</ a></ td>
< td class = "title3" >< a href= "http://sd.mcran.com/2011.htm#dec2011" > Dec</ a></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
< td class = "title3" ></ td>
</ tr>
</ tbody>
</ table>
</ body>
< hr align= "center" width= "100%" >
</ html>
Something like table max-width: 100% with a child container with overflow-x: scroll.