Help:Wiki University HTML-- Tables - Rows

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

Lessons


Flexbox/CSS Grid

Additional Helps

ROW BACKGROUNDS

<tr>

If we are making changes to all the 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
Orange 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 beginning row tag like so:

<tr 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
Orange Beans Almonds Buckwheat

CHANGING FONT-FAMILY IN ROWS

  • 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:
<tr style="background-color:lightgreen; font-family:new times roman" >

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

CHANGING FONT-SIZE IN ROWS

  • 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:
<tr style="background-color:lightgreen; font-family:new times roman; font-size:14px">

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

CHANGING TEXT COLOR IN ROWS

Let change text color to white with color attribute:

<tr style="background-color:lightgreen; font-family:new times roman; font-size:14px; color:white" >

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

CHANGING HEIGHT OF ROWS

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

<tr style="background-color:lightgreen; font-family:new times roman; font-size:14px; color:white; height:50px" >

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

HTML AND WIKITEXT

HTML Wikitext

<tr style="background-color:lightgreen; font-family:new times roman; font-size:14px; color:white; height:50px" >

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

ATTRIBUTES THAT DO NOT WORK IN ROWS

These attributes DO NOT work in row tags and must be placed in each cell to function:
width:
text-align:
vertical-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

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

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
  • To make all the cells in column the same you need only put the code in the top cell
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

Navigation menu