Cellpadding and Cellspacing and Colors in Tables

1
Cellpadding and Cellspacingand Colors in Tables
2
Cellpadding and Cellspacing

• By default, table cells tend to be squeezed close
  to each other. To give your table cells a little
  more breathing room, use CELLPADDING and
  CELLSPACING.

http//www.idocs.com/tags/tables/index_famsupp_29.
html
3
Cellspacing

• CELLSPACING controls the space between table
  cells. Although there is no official default,
  browsers usually use a default of 2.

http//www.idocs.com/tags/tables/index_famsupp_29.
html
4
Cellspacing Tag
You can designate the spacing for the cells in
your table by using the cellspacing tag. The tag
for cellspacing is used within the table tag.
Specify the number of pixels that you would like
your cells to be spaced. cellspacing
http//www.idocs.com/tags/tables/index_famsupp_29.
html
5
Example of Cellspacing

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like a border for your table.
• You would like the spacing between your cells to
  equal 5 pixels.
• This is what your table would look like in a
  browser.

6
Example of Cellspacing (HTML)

• This is what your HTML would look like for the
  previous example.

• lttable border cellspacing5gt
• lttrgt
• lttdgtalt/tdgt
• lttdgtblt/tdgt
• lttdgtclt/tdgt
• lt/trgt
• lttrgt
• lttdgtdlt/tdgt
• lttdgtelt/tdgt
• lttdgtflt/tdgt
• lt/trgt
• lt/tablegt

7
Cellpadding

• CELLPADDING sets the amount of space between the
  contents of the cell and the cell wall. The
  default is 1. CELLPADDING is usually more
  effective than CELLSPACING for spreading out the
  contents of the table.

http//www.idocs.com/tags/tables/index_famsupp_29.
html
8
Cellpadding Tag

• You can designate the padding for the cells in
  your table by using the cellpadding tag. The tag
  for cellpadding is used within the table tag.
  Specify the number of pixels that you would like
  your cells to be spaced.
• cellpadding

http//www.idocs.com/tags/tables/index_famsupp_29.
html
9
Example of Cellpadding

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like a border for your table.
• You would like the padding between your cells to
  equal 7 pixels.
• This is what your table would look like in a
  browser.

10
Example of Cellpadding (HTML)

• This is what your HTML would look like for the
  previous example.

• lttable border cellpadding7gt
• lttrgt
• lttdgtalt/tdgt
• lttdgtblt/tdgt
• lttdgtclt/tdgt
• lt/trgt
• lttrgt
• lttdgtdlt/tdgt
• lttdgtelt/tdgt
• lttdgtflt/tdgt
• lt/trgt
• lt/tablegt

11
Cellspacing and Cellpadding Combined

• You can use the cellspacing attribute with the
  cellpadding attribute.
• For example, if you wanted your tables to be
  spaced 5 pixels and have a padding of 7 pixels,
  this is what your table tag would look like.
• lttable border cellspacing5 cellpadding7gt

12
Colors in Tables

• One attribute will allow you to add color to your
  table in 3 different ways.
• The attribute that you will use to add color is
  the BackGroundColor tag.
• bgcolor(hexadecimal number)

13
Color an Entire Table

• Using the bgcolor attribute in your table tag
  will allow you to designate the color of the
  entire table.
• For example, if you wanted the color of your
  entire table to be orange (FFA500), this is what
  your tag would look like.
• lttable bgcolorFFA500gt

14
Example of Table Color

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like a border for your table.
• You would like the color of your table to be
  orange.

15
Example of Table Color (HTML)

• This is what your HTML would look like for the
  previous example.

• lttable border bgcolorFFA500gt
• lttrgt
• lttdgtalt/tdgt
• lttdgtblt/tdgt
• lttdgtclt/tdgt
• lt/trgt
• lttrgt
• lttdgtdlt/tdgt
• lttdgtelt/tdgt
• lttdgtflt/tdgt
• lt/trgt
• lt/tablegt

16
Color a Table Row

• Using the bgcolor attribute in your table row
  tag will allow you to designate the color of a
  specific row in your table.
• For example, if you wanted the color of a row in
  your table to be green (008000), this is what
  your tag would look like.
• lttable bgcolor008000gt

17
Example of Row Color

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like a border for your table.
• You would like the color of the top row to be
  green.

18
Example of Row Color (HTML)

• This is what your HTML would look like for the
  previous example.

• lttable bordergt
• lttr bgcolor008000gt
• lttdgtalt/tdgt
• lttdgtblt/tdgt
• lttdgtclt/tdgt
• lt/trgt
• lttrgt
• lttdgtdlt/tdgt
• lttdgtelt/tdgt
• lttdgtflt/tdgt
• lt/trgt
• lt/tablegt

19
Color a Table Cell

• Using the bgcolor attribute in your table data
  tag will allow you to designate the color of a
  specific cell in your table.
• For example, if you wanted the color of a cell in
  your table to be blue (0000FF), this is what
  your tag would look like.
• lttable bgcolor0000FFgt

20
Example of Cell Color

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like a border for your table.
• You would like cells a, c, and e to be
  blue.

21
Example of Cell Color (HTML)

• This is what your HTML would look like for the
  previous example.

• lttable bordergt
• lttrgt
• lttd bgcolor0000FFgtalt/tdgt
• lttdgtblt/tdgt
• lttd bgcolor0000FFgtclt/tdgt
• lt/trgt
• lttrgt
• lttdgtdlt/tdgt
• lttd bgcolor0000FFgtelt/tdgt
• lttdgtflt/tdgt
• lt/trgt
• lt/tablegt

22
Border Color

• You can change the color of your tables border
  by using the bordercolor attribute.
• For example, if you wanted your tables border to
  be purple (800080), this is what your tag would
  look like
• lttable border bordercolor800080gt

23
Example of Border Color

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like a border for your table.
• You would like the border for your table to be
  purple.

24
Example of Border Color (HMTL)

• This is what your HTML would look like for the
  previous example.

• lttable border bordercolor800080gt
• lttrgt
• lttdgtalt/tdgt
• lttdgtblt/tdgt
• lttdgtclt/tdgt
• lt/trgt
• lttrgt
• lttdgtdlt/tdgt
• lttdgtelt/tdgt
• lttdgtflt/tdgt
• lt/trgt
• lt/tablegt

25
Using Attributes in Conjunction

• You can use table attributes in conjunction with
  one another.
• For example, you can make a table with a purple
  border and a blue background in your cells.
• Try an example for yourself!