Cell Alignment

1
Cell Alignment
2
Cell Alignment

• You can change the alignment (placement) of the
  contents in your cells.
• Remember that alignment can be both horizontal as
  well as vertical.

3
Horizontal Cell Alignment

• Unless otherwise specified, the default
  horizontal alignment in a cell is left.
• Horizontally, the contents of your cells can be
  aligned to the left, right, or center.

4
Horizontal Cell Alignment Tag

• To change the horizontal alignment of a cells
  contents, type in align.
• If you wanted to change the horizontal alignment
  in a cell to center, this is what your tag would
  look like
• lttd aligncentergt lt/tdgt

5
Example of Horizontal Cell Alignment

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

6
Example of Horizontal Cell Alignment (HTML)

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

• lttable border1gtlttrgtlttd aligncentergtalt/tdgtlttd
  gtblt/tdgtlttdgtclt/tdgtlt/trgtlttrgtlttdgtdlt/tdgtlttdgtelt/td
  gtlttdgtflt/tdgtlt/trgtlt/tablegt

7
Vertical Cell Alignment

• Unless otherwise specified, the default vertical
  alignment in a cell is middle.
• Vertically, the contents of your cells can be
  aligned to the top, middle, or bottom.

8
Vertical Cell Alignment Tag

• To change the vertical alignment of a cells
  contents, type in valign.
• valign stands for Vertical Align.
• If you wanted to change the vertical alignment in
  a cell to the middle, this is what your tag would
  look like
• lttd valignmiddlegt lt/tdgt

9
Example of Vertical Cell Alignment

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like the cell contents for cell a to
  be vertically aligned to the bottom.
• You would also like a border for your table.

10
Example of Vertical Cell Alignment (HTML)

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

• lttable border1gtlttrgtlttd valignbottomgtalt/tdgtltt
  dgtblt/tdgtlttdgtclt/tdgtlt/trgtlttrgtlttdgtdlt/tdgtlttdgtelt/t
  dgtlttdgtflt/tdgtlt/trgtlt/tablegt

11
Changing Horizontal and Vertical Alignment

• You can use the align and valign tags at the
  same time.
• This will allow you to designate specific
  placement of a cells contents.
• Example
• lttd alignright valigntopgt lt/tdgt
• This will give you a cell contents horizontally
  aligned to the right and vertically aligned to
  the top.

12
Example of Vertical and Horizontal Alignment

• You would like to create a 6 cell table with a
  letter in each cell.
• You would like the cell contents for cell a to
  be horizontally aligned to the right and
  vertically aligned to the top.
• You would also like a border for your table.

13
Example of Vertical and Horizontal Alignment
(HTML)

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

• lttable border1gtlttrgtlttd valigntop
  alignrightgtalt/tdgtlttdgtblt/tdgtlttdgtclt/tdgtlt/trgtlttr
  gtlttdgtdlt/tdgtlttdgtelt/tdgtlttdgtflt/tdgtlt/trgtlt/tablegt
  

14
Adding Images

• img src stands for Image Source.
• Using the ltimg srcURLgt tag will let you add
  images into your table.
• The URL for the image that you would like to use
  can be found easily.

15
Finding the Image Source (PC)

• To find the image source on a PC
• Find an image that you like.
• Right click on the image.
• This will open up a menu box.
• Go down to Properties

16
Finding the Image Source (PC)

• This will open up a new box
• The Image Source URL for the image that you
  clicked on will be in the Address line.
• Use this URL for your ltimg srcURLgt tag.

17
Finding the Image Source (Mac)

• To find the Image Source on a Mac, simply hold
  down the mouse button until the menu box appears
  and follow the directions from the PC example.

18
Image Source Tag

• The Image Source tag does not need to be closed.
• You can insert the Image Source tag in between
  your Table Data tags.

19
Example of Image Source

• This is a single celled table. The image has been
  aligned to the right.

Soup image from http//www.mac.com/WebObjects/iCa
rds.woa?affconsumerctyUSlangenidentifier8ZD
tT1lPrRbrS0mJ
20
Example of Image Source (HTML)

• This is what the HTML for the Image Source tag
  would look like in your table.

• lttable bordergt
• lttrgt
• lttdgtltimg src"http//www.mac.com/i/icc/PROD/1/sent
  iments-SIGsoup.jpg" alignrightgtHi there! Take it
  easy and get lots of rest. I hope you get well
  soon!lt/tdgt
• lt/trgt
• lt/tablegt

21
Try some of these examples on your own!