bkelly Posted July 13, 2018 Share Posted July 13, 2018 I have a simple web site created in HTML with a basic simple editor and need to put some addresses in column format. Here is an approximation of the desired format. Quote Regular text above the addresses Mr. Smith Ms Baker 123 main 456 Central Somewhere, CA 12345 OtherCity, FL 32165 Regular text below the addresses I don’t need tables, just two or more columns. As simple as possible. How might I write the HTML code to do this? Link to comment Share on other sites More sharing options...
JMRKER Posted July 13, 2018 Share Posted July 13, 2018 Not sure how your data is formatted, but using JSON format as an example. You could modify the following to suit your needs (???). <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> HTML5 page </title> <!--For: http://w3schools.invisionzone.com/topic/58061-html-columns/ --> <style> #customersInfo { width: 30em; border: 1px solid red; } #customersInfo > input { width: 15em; border: 0; background-color: yellow; margin: 0.5em; } </style> </head> <body> <p> Starting text </p> <fieldset id="customersInfo"> <legend for="customersInfo">Customers Information</legend> <input id="name0" value=""> <input id="name1" value=""> <br> <input id="addr0" value=""> <input id="addr1" value=""> <br> <input id="csz0" value=""> <input id="csz1" value=""> </fieldset> <p> More text </p> <script> var customers = [ {"name":"Mr. Smith", "addr":"123 Main", "city":"Somewhere", "st":"CA", "zip":"12345"}, {"name":"Ms Baker", "addr":"456 Central", "city":"Other City", "st":"FL", "zip":"32165"} ]; function doc(IDS) { return document.getElementById(IDS); } function init() { for (var i=0; i<customers.length; i++) { doc('name'+i).value = customers[i].name; doc('addr'+i).value = customers[i].addr; doc('csz'+i).value = customers[i].city+', '+customers[i].st+' '+customers[i].zip; } } init(); </script> </body> </html> Link to comment Share on other sites More sharing options...
bkelly Posted July 13, 2018 Author Share Posted July 13, 2018 Wow, that is way too much. Just simple text, in columnar format. My post of just simple text with spaces. But HTML does not respect spaces and compacts them all down to one. Posting this I discovered <pre> text </pre> The <pre> will work but I would like to move one step up and find the instructions to make simple columns. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 13, 2018 Share Posted July 13, 2018 They have to to be placed in separate containing div elements of width 50%, this will separated the address into to columns. Then each line of address text must be placed into a paragraph block element, this will cause them to stack above each other in separate rows. https://www.w3schools.com/code/tryit.asp?filename=FT9D8OOB1078 Link to comment Share on other sites More sharing options...
JMRKER Posted July 14, 2018 Share Posted July 14, 2018 You can simplify it even further ... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> HTML5 page </title> <style> .columnList2 { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; } ul { list-style: none; } </style> </head> <body> <ul class="columnList2"> <li>Mr. Smith</li> <li>123 Main</li> <li>Somewhere, CA 12345</li> <li>Ms. Baker</li> <li>456 Central</li> <li>Other City, FL 32165</li> </ul> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now