HTML Comprehensive Concepts and Techniques Second Edition Creating Tables in a Web Site October 23, 2012.

Slides:



Advertisements
Similar presentations
HTML Tags and Their Functions
Advertisements

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Chapter 3 – Web Design Tables & Page Layout
Tables Learn to create and enhance TABLES using a variety of attributes and formats.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
Creating Tables in a Web Site
Internet Basics & Way Beyond!
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 Table1.html 1 2
Chapter 5 Creating an Image Map.
Chapter 4 – Intermediate HTML 4 Outline 4.1 Unordered Lists 4.2 Nested and Ordered Lists 4.3 Basic HTML Tables 4.4 Intermediate HTML Tables and Formatting.
Tutorial 4: Designing a Web Page with Tables
CIS101 Introduction to Computing Week 07. Agenda Your questions JavaScript text Resume project HTML Project Three This week online Next class.
CIS101 Introduction to Computing Week 07. Agenda Your questions Resume project Review Project Two HTML Project Three This week online Next class.
Introducing Web Tables
Web Page Development Identify elements of a Web Page Start Notepad
Using HTML Tables.
Exploring the Internet Creating web pages with 2-d layout Instructor: Michael Krolak Instructor: Patrick Krolak See also
Tables. Tables2 Terminology Caption Headings Cell Data.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.
HTML Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.
Chapter 5 Working with Tables. Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Creating Tables in a Web Site Using an External Style Sheet
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
Creating Tables in a Web Site
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
INTRODUCTORY Tutorial 7 Creating Tables. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Discern the difference between data tables and.
Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
Creating Tables in a Web Site
HTML Project 4 Creating an Image Map.
Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to:  Create tables.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
1 Creating a Second Web Page This section shows you how to create the Huntington Beach Web site.
Html Tables Basic Table Markup. How Tables are Used For Data Display Tables were originally designed to display and organize tabular data (charts, statistics,
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Basic Table Elements. 2 Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table with text.
HTML ( HYPER TEXT MARK UP LANGUAGE ). What is HTML HTML describes the content and format of web pages using tags. Ex. Title Tag: A title It’s the job.
HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
REEM ALMOTIRI Information Technology Department Majmaah University.
Web111a_chapt04.ppt HTM: Section 4 Tables Table Types Text table elements Easy to use Use fixed-font text (font family monospace) Andale Mono Courier Monaco.
Tables: Basic Elements Header 1Header 2Header 3 Row 1, Column 1Row 1, Column 2Row 1, Column 3 Row 2, Column 1Row 2, Column 2Row 2, Column 3 Row 3, Column.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
TABLES. Session Checklist ► Learn the ways that tables can help you organize data on your Web site ► Learn how to prepare a spreadsheet-like table that.
HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.
CIS101 Introduction to Computing Week 07 Spring 2004.
Web Development & Design Foundations with HTML5 8th Edition
Chapter A - Getting Started with Dreamweaver MX 2004
LAB Work 02 MBA 61062: E-Commerce
Creating Tables in a Web Site
Web Development & Design Foundations with H T M L 5
Site Development Foundations Lesson 6
Lesson 5: HTML Tables.
Presentation transcript:

HTML Comprehensive Concepts and Techniques Second Edition Creating Tables in a Web Site October 23, 2012

Today’s Agenda  Hotspots – Questions?  Introduction to Tables.  Theater Club Web Page.  Finish your worksheet from yesterday. 2

Hotspots or Image Maps  Any Questions?  Take out a pen or pencil – POP Quiz! 3

4 Creating Web Pages with Tables complex table simple table colored cells column spanno cell borders row span colored background

5 Creating Web Pages with Tables  Tables can have text and/or images  You can use a table to wrap text around an image –Tables give you more control over the placement of the text and image  Tables help make the content on Web pages clear, interesting, and easy to read

6 Creating Web Pages with Tables text wrapping

7 Creating Web Pages with Tables images in table borderless table

8 Table Elements  Tables consist of rows, columns, and cells –A row is a horizontal line of information –A column is a vertical line of information –A cell is the intersection of a row and a column Heading cells display text as bold and center- aligned Data cells display normal text that is left- aligned

9 Table Elements row

10 Table Elements column

11 Table Elements cell

12 Other Table Parts  Table borders are lines that encompass the perimeter of the table  Table headers are bold text that indicate the purpose of the row or column  A table caption is descriptive text located above or below the table that further describes the purpose of the table

13 Other Table Parts border caption heading cell

14 Planning, Designing, and Coding a Table  Creating tables for a Web page is a three-step process: –Determine if a table is needed –Plan the table –Code the table

15 Determining if a Table is Needed  Not all Web page applications require the use of tables  A table is appropriate when it makes the Web page easier to read

16 Determining if a Table is Needed table bulleted list

17 Planning the Table  Must begin with good design  Sketch the table before writing HTML

18 Coding the Table  Four main tags in coding a table:

19 Coding the Table heading cells data cells start table end table

20 Table Attributes

21 Start Notepad

To Do List:  Enter your tags for the Theater Club web page.  Finish your vocabulary words.  Finish your research! 22