Download presentation
Presentation is loading. Please wait.
Published byShona Shelton Modified over 9 years ago
1
CHAPTER 11 Tables
2
How Are Tables Used Data Display Very tidy and very useful Better Text Alignment Putting text in tables allows you to format indents and columns and add whitespace to a page Overall Page Structure To divide a page into major sections Have a left column for navigational items Have a main column for content Holding Together a Multipart (sliced) Image
3
Basic Table Structure Cell Table Row Column
4
Basic Table Structure Tags Identifies the table Table Row Table Data Cell
5
Basic Table Structure In NotePad cell cell cell
6
Basic Table Structure Table Content Text Graphic Nested Tables
7
Let’s Try It Complete Exercise 11-1: Making A Simple Table Try writing the code for the table shown below. You can open NotePad or just write it down on paper. Cell 1Cell 2 Cell 3Cell 4 Cell 5Cell 6 Cell 7Cell 8 Cell 9Cell 10
8
Spanning Cells Spanning The stretching of a cell to cover several rows or columns Gives more flexibility when designing tables Column Spanning Cell 1 colspan attribute within a tag Stretches a cell to the right and replaces the cells next to it Do not add more columns than what the table has
9
HTML Code Cell 1 Cell 3 Cell 4 Cell 1 Cell 3Cell 4 Spanning Cells
10
Let’s Try It Complete Exercise 11-2: Column Spans Try writing the code for the table shown below. You can open NotePad or write it down on paper. Cell 1 Cell 2Cell 3Cell 4 Cell 5Cell 6 Hints: The second row shows you the total number of columns When a cell is spanned over, its tag does not appear
11
Bell Ringer On a separate sheet of paper, write the following code for the table below: HTML Table Practice Cell 2Cell 3 Cell 4Cell 5 Cell 6
12
Bell Ringer Answer Key HTML Table Practice Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
13
Row Spans Row Span Causes the cell to stretch downward to span across several rows The that was spanned over does not appear in the HTML code. Cell 1 Cell 2 Cell 4 Cell 1 Cell 2 Cell 4
14
Let’s Try It Complete Exercise 11-3: Row Spans Try writing the code for the table shown below. Use NotePad or write it on a sheet of paper. Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Hints: Rows always span down, so cell 2 is part of the first row. Cells that are spanned over do not appear in the table code.
15
Let’s Try It (Answer Key) Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
16
Nesting Tables Nested Tables Putting one table inside of another table cell cell Cell
17
Designing Tables 1. Sketch It! Photoshop Microsoft Word Paper Pencil 2. Find the Grid Draw a grid over the sketch making sure there is a line at each significant division of information Reveals total number of rows and columns 3. Plan the Spans Use paper and pencil 4. Start Building
18
Bell Ringer Write, on a separate sheet of paper or using NotePad, the code used to create the following tables: 1. 2. HomeResumeFamilyLikesDislikes Home Resume Family Likes Dislikes
19
Bell Ringer Answer Key 1. Home Resume Family Likes Dislikes 2. Home Resume Family Likes Dislikes
20
Let’s Try It Complete Exercise 11-4: Finding the Table Structure
21
HTML For Tables Formatting the whole table Attributes within the tag allow for Thickness of the border around the table Dimensions of the table Amount of space within and between table cells Background color for the table
22
Formatting Tables Border thickness Indicates, in pixels, the thickness of the border around the outside edge of the table. 0 will remove the border cell 1 cell 2 cell 3 cell 4 Cell 1Cell 2 Cell 3Cell 4
23
Formatting Tables Border thickness Indicates, in pixels, the thickness of the border around the outside edge of the table. 0 will remove the border cell 1 cell 2 cell 3 cell 4 Cell 1Cell 2 Cell 3Cell 4
24
Formatting Tables Table Width and Height Specify using pixels or percentage Table width set to 100% will fill the entire available width of the page Table will expand to be just wide enough to fit the contents within it by default
25
Formatting Tables Cell Padding The amount of space held between the contents of the cell and the cell border Cell Spacing The amount of space held between cells Background Color Bgcolor attribute Background Patterns Use a tiled image as the background for a table Background attribute
26
Controlling Individual Cells Some of the more interesting table settings are controlled at the cell level These include Column and row spanning Cell dimensions Alignment of cell contents Background color for the cell Use these attributes in the tag
27
Controlling Individual Cells Cell content alignment align and valign attributes Control the alignment of elements within cells align - Use to position elements horizontally in a cell Left Right Center Valign – positions elements vertically in the cell Top Center Bottom LeftCenteredRight Top Center Bottom
28
Controlling Individual Cells Cell background color Specifies the background color to be used in the table cell Cell color settings override any colors set at the table or row level Cell 1Cell 2 Cell 3Cell 4
29
Let’s Try It Complete Exercise 11-5: Building A Table
30
Using Tables for Alignment Used to control the display of the page Centering in the Window Create a one celled table Set width and height to 100% Set alignment to center and middle Page Structure Two column layout commonly used One column for links The other for content
31
Where Tables Go Wrong Expanding text in cells Different browsers interpret font codes differently Collapsing Cells Cells may disappear if they contain no content Shifting Columns Avoiding Extra Whitespace Begin with the border, cellpadding, and cellspacing all set to 0 in the tag.
32
Test Yourself 1. What are the parts of an HTML table? What tags define them? 2. What attribute adds space between table cells? Where is it placed? 3. What attribute would you use to position text at the bottom of a cell? Where does that attribute go? 4. How do you change the background color of a cell? What happens if there is already a background color set for the table?
33
Test Yourself 5. Write the code for the table below. Be sure to consider how the text is aligned in each cell. The table is 400 px wide Each column is 50% of the width Each row is 100 px tall Cells are colored as labeled reddefault yellow
34
Test Production Links Table Open your Links.html page from your About Me folder Add a border, cell padding, and cell spacing to table. Add alignments (other than default) to the cell contents Change the color of the table. Print the Notepad document and web page to hand in for grading. Call Ms. Brown to web page on screen. Due at the end of the period. No Exceptions!!!!!!! STAY ON TASK!!!!!!!!
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.