View source for Help:Wiki University HTML-- Tables - Columns Only

{{HTML School}}{{HTML Tutorial Sidebar}}
<div style=" float:right; width:73%; margin-bottom:0px; margin-top:-30px">
<!--first table links at top of page---------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
<tr><td>
<div style="font-size:14pt; font-family:arial;  ">[[Help:Wiki University HTML-- Tables - Scrolling|<< Previous Chapter]] </div>
</td>
<td>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- Tables - Column Spans|Next Chapter >>]] </div>
</td></tr>
</table>
==Table with columns only==
<p>An easy way to show a long list of items such as counties in a state is to use a table with a single row.  In this row have the number of cells to equal the number of columns you think you need to display the items you want to show.</p>
If you have a list of 100 items, you can create a table with one row with four cells in that row.  Then you can place 25 items in each cell.  This will create four columns with 25 items in each. 
<p>This is a list of the counties in New Hampshire.  The list of counties is in three cells in one row table to create a three column list:</p>
{| width="100%" 
|-
| 
*[[Belknap County, New Hampshire Genealogy|Belknap]] 
*[[Carroll County, New Hampshire Genealogy|Carroll]] 
*[[Cheshire County, New Hampshire Genealogy|Cheshire]] 
*[[Coös County, New Hampshire Genealogy|Coös]]

| valign="top" | 
*[[Grafton County, New Hampshire Genealogy|Grafton]] 
*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]] 
*[[Merrimack County, New Hampshire Genealogy|Merrimack]]

| valign="top" | 
*[[Rockingham County, New Hampshire Genealogy|Rockingham]] 
*[[Strafford County, New Hampshire Genealogy|Strafford]] 
*[[Sullivan County, New Hampshire Genealogy|Sullivan]]
|}
Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
<font color="red"><nowiki><table width="100%"> </nowiki></font color><br>
<font color="green"><nowiki><tr></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color><br>
<nowiki>*[[Belknap County, New Hampshire Genealogy|Belknap]] </nowiki><br>
<nowiki>*[[Carroll County, New Hampshire Genealogy|Carroll]]</nowiki><br> 
<nowiki>*[[Cheshire County, New Hampshire Genealogy|Cheshire]] </nowiki><br>
<nowiki>*[[Coös County, New Hampshire Genealogy|Coös]]</nowiki><br>
<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color><br>
<nowiki>*[[Grafton County, New Hampshire Genealogy|Grafton]] </nowiki><br>
<nowiki>*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]] </nowiki><br>
<nowiki>*[[Merrimack County, New Hampshire Genealogy|Merrimack]]</nowiki><br>
<font color="red"><nowiki></td></nowiki></font color><br>
<font color="red"><nowiki><td></nowiki></font color><br>
<nowiki>*[[Rockingham County, New Hampshire Genealogy|Rockingham]] </nowiki><br>
<nowiki>*[[Strafford County, New Hampshire Genealogy|Strafford]] </nowiki><br>
<nowiki>*[[Sullivan County, New Hampshire Genealogy|Sullivan]]</nowiki><br>
<font color="red"><nowiki></td></nowiki></font color><br>
<font color="green"><nowiki></tr></nowiki></font color><br>
<font color="red"><nowiki></table></nowiki></font color>
</div><br>
*<font color="blue"><b>NOTICE</b></font color> that there is only one row <nowiki><tr></nowiki>.
*<font color="blue"><b>NOTICE</b></font color> there are three cells <nowiki><td></nowiki> in this row.

*If we wanted the width of the columns to be the same or the width of the table to go across the page, we would insert our width attributes and whatever other attributes we think would make it nicer looking.
----

==Try these out==
[[File:Tests.gif|100px|right]]
<!--Exercises -------------------------------------------------------------->
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; ">
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
<div style="padding-top:12px; padding-left:10px; ">
*Take this list of counties and make a five column list using just one ROW tag |- in a table.
Adair 
Andrew 
Atchison 
Audrain 
Barry 
Barton 
Bates 
Benton 
Bollinger 
Boone 
Buchanan 
Butler 
Caldwell 
Callaway 
Camden 
Cape Girardeau 
Carroll 
Carter 
Cass 
Cedar 
*Make all the columns of equal width
*Alternate the colors of the columns with lightblue and lightgray.
*Use padding of 5px.
*Place a black line between the columns.

</div>
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch HTML Tutorial Answers#Tables - Columns Only|Check your answers ]] </div>
</div>
</div>

<!--Quick Quiz box ----------------------------------------->

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; ">
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgray; ">Quick Quiz</div>
<div style="padding-top:12px; padding-left:10px; ">
*To have a list of items in six columns you need to create a table with one row and six cells.
::A. True
::B. False
*A one row table looks better if the columns are of equal length.
::A. True
::B. False
*To make the items on separate lines, you use <nowiki><p></nowiki> tags.
::A. True
::B. False

</div>
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; ">
<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">[[FamilySearch HTML Tutorial Answers#Tables - Columns Only|Check your answers ]] </div>
</div>
</div>

<!--Links to next and preceding chapters bottom of page ----------------------------->
<table style="width:100%; ">
<tr><td>
<div style="font-size:14pt; font-family:arial;  ">[[Help:Wiki University HTML-- Tables - Scrolling|<< Previous Chapter]] </div>
</td>
<td>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- Tables - Column Spans|Next Chapter >>]] </div>
</td></tr>
</table>
{{reflist}}
</div>
__NOTOC__
[[Category:Wikitext Lessons]]