Jump to content
bkelly

html columns

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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>
	

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>
	 
	

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×