Help:Wiki University HTML-- Tables - Columns Only

From FamilySearch Wiki
Jump to: navigation, search
MAIN PAGE
WIKI
WIKITEXT
HTML/CSS
FAMILY HISTORY CENTERS
VISUAL EDITOR

Lessons


Flexbox/CSS Grid

Additional Helps

TABLE WITH COLUMNS ONLY

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 . . . . .

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

Navigation menu