To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Tables - Rows

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

Row backgrounds[edit | edit source]

|-

If we are making changes to cells in a row, rather than putting code into each cell, we can put the coding in our row tags. Let's use our demonstration table again, this time without borders on the cells:

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

Let's say we want to place a background color in the heading row, we simply add the background-color attribute to the row tag like so:

|- style="background-color:lightgreen"

Our table will now look like this:

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

Changing font-family in rows[edit | edit source]

  • If you are going to change the font-family in all the cells in a row, install the code in the row tag. Here we will add it to the background attribute like so:
|- style="background-color:lightblue; font-family:Rockwell"

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

Changing font-size in rows[edit | edit source]

  • To change the font-size in a row, install the code in the row tag. Here we will add it to the above changes like so:
|- style="background-color:lightgreen; font-family:new times roman; font-size:18px"

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

Changing text color in rows[edit | edit source]

Lets change text color to darkblue with color attribute:

|- style="background-color:lightblue; font-family:new times roman; font-size:18px; color:darkblue"

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

Changing height of rows[edit | edit source]

If you want the row to be taller, you can add the height attribute:

|- style="background-color:lightgreen; font-family:new times roman; font-size:14px; color:blue; height:50px"

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

Attributes that DO NOT work in rows[edit | edit source]

These attributes DO NOT work in row tags and must be placed in each cell to function:
width:
text-align:
border:
padding:

Html7.jpg

Coding in cells override coding in rows. Coding in rows override coding in the table tags. This is handy to know in case you want to change an individual cell instead of deleting the coding in the row tag and then having to put coding in each cell of the row.

Changing columns[edit | edit source]

Html12.pngWell how about columns, you ask. Sorry, there is no easy way to do columns. You have to place the codes in each of the cells of the column.

Try these out[edit | edit source]

Tests.gif
Exercises
  • With our above table place a yellow border, "groove" style and 10 pixels thick.
  • Make the table 700 pixels wide.
  • Next place a blue border around the headers.
  • Give the header cells a light blue background.
  • Change the color of the font to white.


Quick Quiz
  • You cannot change the font color in a row
A. True
B. False
  • Background color cannot be placed in cells through coding in row
A. True
B. False
  • You can change the font-family in the rows
A. True
B. False