Difference between revisions of "Help:Wiki University HTML-- Tables - Columns Only"

From FamilySearch Wiki
Jump to navigation Jump to search
m
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{HTML School}}{{HTML Tutorial Sidebar}}
+
<div style="display:grid; grid-template-columns:10% 10% 20% 20% 20% 20%">
<div style=" float:right; width:70%; margin-bottom:0px; ">
+
<!--------------row 1-------------------------->
<!--first table links at top of page---------------------------------------------->
+
<!--tool bar--------------------------------------------------->
<table style="width:100%; margin-bottom:-10px; ">
+
{{HTML School}}
<tr><td>
+
<!----------------row 2---------------------------->
<div style="font-size:14pt; font-family:arial;  ">[[Help:Wiki University HTML-- Tables - Scrolling|<< Previous Chapter]] </div>
+
<!-------------------menu-------------------------------->
</td>
+
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{HTML Tutorial Sidebar}}</div>
<td>
+
<!-----------------------main------------------------>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- References/Footnotes|Next Chapter >>]] </div>
+
<!-------------------------------chapters top row---------------------------------->
</td></tr>
+
<div style="grid-column:3/8; padding-left:0.5em">
</table>
+
<!-------------------------------chapters top row---------------------------------->
==Table with columns only==
+
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
 +
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Tables - Scrolling|<< Previous Chapter]]</div>
 +
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Tables - Column Spans|Next Chapter >>]]</span></div>
 +
</div>
 +
<div style="margin-left:0.5em">
 +
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
 +
==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>
 
<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.  
 
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>
+
<p>This is a list of the counties in New Hampshire.  The list of counties is in four cells in one row table to create a four column list:</p>
{| width="100%"
+
{|  
 
|-
 
|-
|  
+
| style="vertical-align:top; padding-right:0.5em"|
 
*[[Belknap County, New Hampshire Genealogy|Belknap]]  
 
*[[Belknap County, New Hampshire Genealogy|Belknap]]  
 
*[[Carroll County, New Hampshire Genealogy|Carroll]]  
 
*[[Carroll County, New Hampshire Genealogy|Carroll]]  
 
*[[Cheshire County, New Hampshire Genealogy|Cheshire]]  
 
*[[Cheshire County, New Hampshire Genealogy|Cheshire]]  
 +
| style="vertical-align:top; padding-right:0.5em"|
 
*[[Coös County, New Hampshire Genealogy|Coös]]
 
*[[Coös County, New Hampshire Genealogy|Coös]]
 
| valign="top" |
 
 
*[[Grafton County, New Hampshire Genealogy|Grafton]]  
 
*[[Grafton County, New Hampshire Genealogy|Grafton]]  
 
*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]]  
 
*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]]  
 +
| style="vertical-align:top; padding-right:0.5em"|
 
*[[Merrimack County, New Hampshire Genealogy|Merrimack]]
 
*[[Merrimack County, New Hampshire Genealogy|Merrimack]]
 
| valign="top" |
 
 
*[[Rockingham County, New Hampshire Genealogy|Rockingham]]  
 
*[[Rockingham County, New Hampshire Genealogy|Rockingham]]  
 
*[[Strafford County, New Hampshire Genealogy|Strafford]]  
 
*[[Strafford County, New Hampshire Genealogy|Strafford]]  
 +
| style="vertical-align:top; padding-right:0.5em"|
 
*[[Sullivan County, New Hampshire Genealogy|Sullivan]]
 
*[[Sullivan County, New Hampshire Genealogy|Sullivan]]
 
|}
 
|}
 
Here is the coding:
 
Here is the coding:
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:100%; font-size:10pt; font-family:Courier New">
+
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:50%; font-size:10pt; font-family:Courier New">
<nowiki><table width="100%" </nowiki><br>
+
<font color="red"><nowiki><table> </nowiki></font color><br>
<nowiki><tr></nowiki><br>
+
<font color="green"><nowiki><tr></nowiki></font color><br>
<nowiki><td></nowiki><br>
+
<font color="red"><nowiki><td></nowiki></font color><br>
 
<nowiki>*[[Belknap County, New Hampshire Genealogy|Belknap]] </nowiki><br>
 
<nowiki>*[[Belknap County, New Hampshire Genealogy|Belknap]] </nowiki><br>
 
<nowiki>*[[Carroll County, New Hampshire Genealogy|Carroll]]</nowiki><br>  
 
<nowiki>*[[Carroll County, New Hampshire Genealogy|Carroll]]</nowiki><br>  
 
<nowiki>*[[Cheshire County, New Hampshire Genealogy|Cheshire]] </nowiki><br>
 
<nowiki>*[[Cheshire County, New Hampshire Genealogy|Cheshire]] </nowiki><br>
 +
<font color="red"><nowiki></td></nowiki></font color><br>
 +
<font color="red"><nowiki><td></nowiki></font color><br>
 
<nowiki>*[[Coös County, New Hampshire Genealogy|Coös]]</nowiki><br>
 
<nowiki>*[[Coös County, New Hampshire Genealogy|Coös]]</nowiki><br>
<nowiki></td></nowiki><br>
 
<nowiki><td></nowiki><br>
 
 
<nowiki>*[[Grafton County, New Hampshire Genealogy|Grafton]] </nowiki><br>
 
<nowiki>*[[Grafton County, New Hampshire Genealogy|Grafton]] </nowiki><br>
 
<nowiki>*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]] </nowiki><br>
 
<nowiki>*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]] </nowiki><br>
 +
<font color="red"><nowiki></td></nowiki></font color><br>
 +
<font color="red"><nowiki><td></nowiki></font color><br>
 
<nowiki>*[[Merrimack County, New Hampshire Genealogy|Merrimack]]</nowiki><br>
 
<nowiki>*[[Merrimack County, New Hampshire Genealogy|Merrimack]]</nowiki><br>
<nowiki></td></nowiki><br>
 
<nowiki><td></nowiki><br>
 
 
<nowiki>*[[Rockingham County, New Hampshire Genealogy|Rockingham]] </nowiki><br>
 
<nowiki>*[[Rockingham County, New Hampshire Genealogy|Rockingham]] </nowiki><br>
 
<nowiki>*[[Strafford County, New Hampshire Genealogy|Strafford]] </nowiki><br>
 
<nowiki>*[[Strafford County, New Hampshire Genealogy|Strafford]] </nowiki><br>
 +
<font color="red"><nowiki></td></nowiki></font color><br>
 +
<font color="red"><nowiki><td></nowiki></font color><br>
 
<nowiki>*[[Sullivan County, New Hampshire Genealogy|Sullivan]]</nowiki><br>
 
<nowiki>*[[Sullivan County, New Hampshire Genealogy|Sullivan]]</nowiki><br>
<nowiki></td></nowiki><br>
+
<font color="red"><nowiki></td></nowiki></font color><br>
<nowiki></tr></nowiki><br>
+
<font color="green"><nowiki></tr></nowiki></font color><br>
<nowiki></table></nowiki>
+
<font color="red"><nowiki></table></nowiki></font color>
 
</div><br>
 
</div><br>
*<font color="blue"><b>NOTICE</b></font color> that there is only one row (|-).
+
*<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 (|) in this row.
+
*<font color="blue"><b>NOTICE</b></font color> there are four 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.
 
*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==
+
==TRY THESE OUT . . . . . ==
 
[[File:Tests.gif|100px|right]]
 
[[File:Tests.gif|100px|right]]
 
<!--Exercises -------------------------------------------------------------->
 
<!--Exercises -------------------------------------------------------------->
Line 95: Line 101:
 
</div>
 
</div>
 
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">
 
<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; ">[[Help:Wiki University Wikitext--Tutorial Answers#Tables - Columns Only|Check your answers ]] </div>
+
<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>
 
</div>
 
</div>
Line 116: Line 122:
 
</div>
 
</div>
 
<div style="background-color:lightgray; width:100%; height:35px; padding-top:10px; ">
 
<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; ">[[Help:Wiki University Wikitext--Tutorial Answers#Tables - Columns Only|Check your answers ]] </div>
+
<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>
 
</div>
 
</div>
  
<!--Links to next and preceding chapters bottom of page ----------------------------->
+
<!---------------------------------END OF MATERIAL------------------------------------------->
<table style="width:100%; ">
+
</div>
<tr><td>
+
<!-------------------------------chapters bottom---------------------------------------------------->
<div style="font-size:14pt; font-family:arial;  ">[[Help:Wiki University HTML-- Tables - Scrolling|<< Previous Chapter]] </div>
+
<div style="clear:both"></div>
</td>
+
<div style="display:flex; justify-content:space-between; padding:10px">
<td>
+
<div style="font-size:1.3em">[[Help:Wiki University HTML-- Tables - Scrolling|<< Previous Chapter]]</div>
<div style="font-size:14pt; font-family:arial; text-align:right; ">[[Help:Wiki University HTML-- References/Footnotes|Next Chapter >>]] </div>
+
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University HTML-- Tables - Column Spans|Next Chapter >>]]</span></div>
</td></tr>
+
</div>
</table>
 
 
{{reflist}}
 
{{reflist}}
 
</div>
 
</div>
 
__NOTOC__
 
__NOTOC__
[[Category:Wikitext Lessons]]
+
[[Category:Wiki Lessons]]

Latest revision as of 08:53, 27 February 2018

TABLE WITH COLUMNS ONLY[edit | edit source]

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.

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.

This is a list of the counties in New Hampshire. The list of counties is in four cells in one row table to create a four column list:

Here is the coding:

<table>
<tr>
<td>
*[[Belknap County, New Hampshire Genealogy|Belknap]]
*[[Carroll County, New Hampshire Genealogy|Carroll]]
*[[Cheshire County, New Hampshire Genealogy|Cheshire]]
</td>
<td>
*[[Coös County, New Hampshire Genealogy|Coös]]
*[[Grafton County, New Hampshire Genealogy|Grafton]]
*[[Hillsborough County, New Hampshire Genealogy|Hillsborough]]
</td>
<td>
*[[Merrimack County, New Hampshire Genealogy|Merrimack]]
*[[Rockingham County, New Hampshire Genealogy|Rockingham]]
*[[Strafford County, New Hampshire Genealogy|Strafford]]
</td>
<td>
*[[Sullivan County, New Hampshire Genealogy|Sullivan]]
</td>
</tr>
</table>


  • NOTICE that there is only one row <tr>.
  • NOTICE there are four cells <td> 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 . . . . .[edit | edit source]

Tests.gif
Exercises
  • 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.


Quick Quiz
  • 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 <p> tags.
A. True
B. False