Attention: HTML FORUMS members:
The Hypertext Markup Language ( HTML )/Cascading Style Sheets ( CSS ) code for one of my web pages is shown below:
I found an HTML5/CSS code example which gives me about 95% of the solution that I am looking for ( click here ). Specifically, if I declare a ".table1 { ... }" class ( which is currently commented out in the "<style></style>" section of my web page ), and remove the "div +" ( CSS adjacent sibling combinator ) portion from my CSS "table { ... }" declaration, then this will cause my first table ( i.e., "'Book,' 'Chapter,' 'Verse,' etc. ) to be displayed on my web page with no borders or shading, while my second table is displayed with borders and shading. However, editing the first line of the code of the first table ( i.e., from "<table align='center' class='src'>" to "<table align='center' class='table1'>" ) has an adverse effect on the output of the ".json" data file ( i.e., "mydata_2_11-07-2020.json" ). Changing the class in that "<table></table>" code, for the first table, from "src" to "table1" causes the data in the ".json" data file to print in a long, narrow, vertical strip, rather than horizontally ( which is the format that I need ). There is also a way to assign more than one class to an HTML5 element ( i.e., "<table align='center' class='table1 src'>" ), but I have not been able to get the output of the above-mentioned ".json" data file to print out correctly ( this approach does not appear to work ). Any suggestions?
The Hypertext Markup Language ( HTML )/Cascading Style Sheets ( CSS ) code for one of my web pages is shown below:
Code:
<html>
<head>
<meta content = "text/html; charset=ISO-8859-1" http-equiv = "content-type">
<!-- Adapted and edited by Russell E. Willis as of 12/28/18. -->
<!-- See additional comments below. -->
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
article {
@media only screen and (max-width: 35%) {
body {
margin-left: 35%;
border-left: 1px solid gray;
padding: 0em;
overflow: hidden;
}
}
}
sup {
vertical-align: super;
font-size: x-small;
}
p1 {
text-indent: 1px;
}
.text1 {
margin: 15px;
}
.content-box {
column-count: 2;
-webkit-column-rule: 1px double purple;
-moz-column-rule: 1px double purple;
column-rule: 1px double purple;
margin: 15px;
}
blockquote {
margin-top: -0.21em;
margin-bottom: 15px;
margin-left: 15px;
margin-right: 15px;
}
/* .table1 {
width: 100px;
margin: auto;
font-size: 14px;
border: none;
border-collapse: collapse;
}
.table1 th {
color: #white;
vertical-align: middle;
text-align: center;
border: none;
}
.table1 td {
color: black;
background-color: white;
vertical-align: middle;
text-align: center;
border: none;
}
.table1 tr:nth_child(1) {
background-color: white;
vertical-align: middle;
text-align: center;
border: none;
} */
div + table {
font-family: Georgia;
border-collapse: collapse;
width: 90%;
}
td, th {
border: 1px solid black;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
/* */
/* table1 {
font-family: Georgia;
border-collapse: collapse;
width: auto;
}
td1, th1 {
border: none;
text-align: center;
padding: 8px;
}
tr1 {
background-color: white;
} */
</style>
<div class="container">
<!-- The following HTML code was adapted and edited from an example located -->
<!-- at the following web site: "https://www.tutorialspoint.com/json/json_ajax_example.htm." -->
<script type = "application/javascript">
function loadJSON() {
var data_file = "mydata_2_11-07-2020.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e) {
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function() {
if (http_request.readyState == 4 ) {
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj variable now contains the data structure and can
// be accessed as jsonObj.name and jsonObj.country.
document.getElementById("Book").innerHTML = jsonObj.book;
document.getElementById("Chapter").innerHTML = jsonObj.chapter;
document.getElementById("Verse").innerHTML = jsonObj.verse;
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>The Holy Bible.</title>
</head>
<body>
<h3>   Please click the " Bible Verses " button below
to read Bible verses ( <i>ESV</i> ), and read the article also:</h3>
<!-- Begin: New div section as of 11/08/20. -->
<div>
<!-- Previously "<table align='center' class='src'>" -->
<table align="center" class="table1 src">
<tr>
<th><ins>Book</ins></th>
<th><ins>Chapter</ins></th>
<th><ins>Verses</ins></th>
</tr>
<tr>
<td><div id = "Book">Mark</div></td>
<td><div id = "Chapter">10</div></td>
<td><div id = "Verse">46-52</div></td>
</tr>
</table>
<center><div class = "central">
<button type = "button" onclick = "loadJSON()">Bible Verses</button>
</div></center>
<br>
<!-- End adapted and edited HTML code section. -->
<center><ins>T<font size="2" color="black">HE</font> H<font size="2" color="black">OLY</font>
B<font size="2" color="black">IBLE</font>: E<font size="2" color="black">NGLISH</font>
S<font size="2" color="black">TANDARD</font> V<font size="2" color="black">ERSION.</font></ins></center><br>
<center><img src="Holy_Bible_ESV_6_crop (635x640).jpg" height="300" width="300"></center><br>
<center><b>" <ins>Lord, let our eyes be opened.</ins> "</b></center>
<article>
< Deleted to save space. >
</article>
<br>
<center><caption><ins>Table 1.</ins>:[ The shadow of the law of Moses v. The
true form of these realities. ]</caption></center><br><br>
</div>
<table align="center">
<tr>
<th>The Shadow Of The Law Of Moses.</th>
<th>Old Testament Passage.</th>
<th>The True Form Of These Realities.</th>
<th>New Testament Passage(s).</th>
</tr>
<tr>
<td>Blood of the Sacrifice thrown on people.</td>
<td>Exodus 24:1-8.</td>
<td>Sprinkling with the blood of Jesus Christ.</td>
<td>1 Peter 1:1, 2, for example.</td>
</tr>
<tr>
<td>The Garments of the Priests.</td>
<td>Exodus, chapter 28.</td>
<td>Clothed with Christ.</td>
<td>Galatians 3:26, 27; Luke 24:49; and Romans 13:14, for example.</td>
</tr>
</table><br>
<article>
< Deleted to save space. >
</article>
< Deleted to save space. >
</div>
</body>
</html>I found an HTML5/CSS code example which gives me about 95% of the solution that I am looking for ( click here ). Specifically, if I declare a ".table1 { ... }" class ( which is currently commented out in the "<style></style>" section of my web page ), and remove the "div +" ( CSS adjacent sibling combinator ) portion from my CSS "table { ... }" declaration, then this will cause my first table ( i.e., "'Book,' 'Chapter,' 'Verse,' etc. ) to be displayed on my web page with no borders or shading, while my second table is displayed with borders and shading. However, editing the first line of the code of the first table ( i.e., from "<table align='center' class='src'>" to "<table align='center' class='table1'>" ) has an adverse effect on the output of the ".json" data file ( i.e., "mydata_2_11-07-2020.json" ). Changing the class in that "<table></table>" code, for the first table, from "src" to "table1" causes the data in the ".json" data file to print in a long, narrow, vertical strip, rather than horizontally ( which is the format that I need ). There is also a way to assign more than one class to an HTML5 element ( i.e., "<table align='center' class='table1 src'>" ), but I have not been able to get the output of the above-mentioned ".json" data file to print out correctly ( this approach does not appear to work ). Any suggestions?
Last edited:
