Help:Wiki University Wikitext--Tables - Column headings

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons

Intermediate

Advanced

Flexbox

Additional Helps

Table column headings[edit | edit source]

!
  • We have a title for our table, but what do the columns represent?
  • To label the columns we use exclamation marks:  !
  • Unlike the caption, we have to have a row tag before the exclamation marks:

|-
!
!
!
!


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

|-
! Fruits
! Vegetables
! Nuts
! Grains


Healthy Foods
Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Oranges Beans Almonds Buckwheat
  • NOTICE there are no borders on column headings.
  • NOTICE the headings centered by default in the heading cell.
  • NOTICE the font is bold as well.
  • NOTICE the table border will expand as you add rows and/or column headers.

Changing column headings[edit | edit source]

  • 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
Oranges Beans Almonds Buckwheat

Here is the coding:

{| style="border:1px solid red"
|+ style="font-size:24pt; margin-bottom:15px; font-family:new times roman; " | Healthy Foods
|-
! style=" border:1px solid red; width:25%; background-color:lightgreen " |Fruits
! style=" border:1px solid red; width:25%; background-color:lightgreen " |Vegetable
! style=" border:1px solid red; width:25%; background-color:lightgreen " |Nuts
! style=" border:1px solid red; width:25%; background-color:lightgreen " |Grains
|-
| style="border:1px solid red" | Apples
| style="border:1px solid red" | Peas
| style="border:1px solid red" | Peanuts
| style="border:1px solid red" | Wheat
|-
| style="border:1px solid red" | Pears
| style="border:1px solid red" | Carrots
| style="border:1px solid red" | Walnuts
| style="border:1px solid red" | Oats
|-
| style="border:1px solid red" | Cherries
| style="border:1px solid red" | Corn
| style="border:1px solid red" | Cashews
| style="border:1px solid red" | Barley
|-
| style="border:1px solid red" | Oranges
| style="border:1px solid red" | Beans
| style="border:1px solid red" | Almonds
| style="border:1px solid red" | Buckwheat

|}
  • 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[edit | edit source]

Tests.gif
Exercises
  • Copy the table coding displayed directly above to your sandbox, then place a yellow border around it in the "dashed" style and with a thickness of 10 pixels.
  • Make this table 500 pixels wide.
  • Next place a blue border around the headings.
  • change our Healthy Foods caption to a font of your choice;
  • Change the background color for the headings.


Quick Quiz
  • The headers are always (default) centered on the column.
A. True
B. False
  • You can put borders in the headers column
A. True
B. False
  • Headers are always (default) in bold type.
A. True
B. False
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_Wikitext--Tables_-_Column_headings&oldid=3578589"