Help:Wiki University HTML-- Tables - Column headings

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 COLUMN HEADINGS

<th>
  • We have a title for our table, but what do the columns represent?
  • To label the columns we use <th> tags

<tr>
<th>
<th>
<th>
<th>
</tr>


  • Here are the column headings for our healthy foods table:

<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Nuts</th>
<th>Grains</th>
</tr>


Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE there are no borders on column headings.
  • NOTICE the headings are centered by default.
  • NOTICE the font is bold.

CHANGING COLUMN HEADINGS

  • To put a border on the heading cells, we will use our border attribute
  • To make the headings really stand out let's add a background color as well.

Here is what the table will look like with borders, centered text and background color:

Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat

Here is the coding:

<table style="border:1px solid red">
<caption>Healthy Foods</caption>
<tr>
<th style="border:1px solid red; background-color:lightgreen; width:25%">Fruits</th>
<th style="border:1px solid red; background-color:lightgreen; width:25%">Vegetables</th>
<th style="border:1px solid red; background-color:lightgreen; width:25%">Nuts</th>
<th style="border:1px solid red; background-color:lightgreen; width:25%">Grains</th>
</tr>
<tr>
<td style="border:1px solid red">Apples</td>
<td style="border:1px solid red">Peas</td>
<td style="border:1px solid red">Peanuts</td>
<td style="border:1px solid red">Wheat</td>
</tr>
<tr>
<td style="border:1px solid red">Pears</td>
<td style="border:1px solid red">Carrots</td>
<td style="border:1px solid red">Walnuts</td>
<td style="border:1px solid red">Oats</td>
</tr>
<tr>
.
.
.
.
</table>


  • NOTICE the width attribute was moved into the heading tags so we know where they are. They could have stayed where they were or with any other cells in the columns.

Html7.jpg

You can change the font, font size, color, etc. in these heading tags as you can in regular cells.

TRY THESE OUT . . . . .

Tests.gif
Exercises
  • With our above table place a orange border, "dashed" style and 10 pixels thick.
  • Make the table 500 pixels wide.
  • Next place a blue border around the headings.
  • Install our Healthy Foods caption with any font;
  • Install the headings for each of the columns.
  • Install a background color for the headings.


Quick Quiz
  • The headings are always centered on the column.
A. True
B. False
  • You have to use the text-align to put the header on the left side
A. True
B. False
  • Headers are always in bold type.
A. True
B. False

Navigation menu