Tables. Tables2 Terminology Caption Headings Cell Data.

Slides:



Advertisements
Similar presentations
HTML TABLES EXPLAINED. What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields,
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.
Tables Learn to create and enhance TABLES using a variety of attributes and formats.
HTML Tables Introduction to Tables Introduction to Tables Table Format Table Format Table Captions Table Captions Table Example Table Example Excercise.
Designing Web Pages Tables part one. Using Tables for Page Layout 2.
Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
TABLES 6 How to create tables What information suits tables How to represent complex data in tables.
Internet Basics & Way Beyond!
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 Table1.html 1 2
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.
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
HTML TABLES Cyndi Hageman. Tables   Attributes Name or id – used to identify the table Border = set this to determine if there is a border and the size.
Lists and Tables Cool sites Lists unordered, ordered, definition Tables basic.
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 Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.
1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row.
Identifies the Structure Table Row Column 1 Table Heading Column 2.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.
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.
How to create tables in HTML…
HTML Comprehensive Concepts and Techniques Second Edition Creating Tables in a Web Site October 23, 2012.
XHTML Tables. Tables create little boxes in which you can place things to keep them organized. The little boxes are called table cells. Tables are created.
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)
Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.
1 3/7/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: More on tables and images.
Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to:  Create tables.
Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.
HTML (Hypertext Markup Language) – Class 3 Recap: HTML Special Characters (ex: ©). Including Images – using the tag. Lists – Ordered and Unordered.
HTML: Tables & Frames Internet Technology.
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
A table is a rectangular arrangement of rows and columns on your screen A table is used to organize data into rows and columns and also increasingly.
TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.
1 HTML tables
Kevin Murphy Introduction to Tables Masters Project CS 490.
Tables in HTML. Table Tag HTML tables always begin and end with a table tag. Syntax:
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.
 2003 Prentice Hall, Inc. All rights reserved. Introduction to HTML: Tables Outline 1 Introduction 2 Basic HTML Tables 3 Intermediate HTML Tables and.
Tables lab5. Drawing a table Tables are the web designer’s best friend and worst enemy. To draw a table we will use:  tag  for raw  tags for column.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
1 Tables attributes. 2 Table attributes: border Activates border around cells Syntax: – where “n” is a value in pixels which controls the “thickness”
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.
26 HTML Tables … surround table … surround each row … surround each cell … like, but bold and centered by default (for table headings) … table title No.
How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
Web Page Tables GMU-Teaching with Technology. Table Characteristics: Looks like a news page Contains columns and rows.
Internet Applications Development Lecture 6 L. Obead Alhadreti.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
Advanced Tables. Let's build some tables using each of these features and then try combining both features into the same table. Spanning Rows and Columns.
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.
CIS101 Introduction to Computing Week 07 Spring 2004.
H T M L A B E S X P I N D.
Tables:.
Creating Tables Steps for creating a Table Important Facts about Table
Creating Tables Steps for creating a Table Important Facts about Table
HTML Tables & Frames Internet Technology.
Using rowspan and colspan attributes
Using rowspan and colspan attributes
H T M L A B E S X P I N D.
Site Development Foundations Lesson 6
Lesson 5: HTML Tables.
H T M L A B E S X P I N D.
HTML Tables & Frames Internet Technology.
Presentation transcript:

Tables

Tables2 Terminology Caption Headings Cell Data

Tables3 Notation n … n … n Tables are defined row by row – … – … n Table row n Each row is defined cell by cell – … – … n Table heading – … – … n Table data

Tables4 Notation n Borders – – –Borderless tables used for placement

Tables5 Cell Alignment n Header data are centered horizontally and vertically within a cell n Non-header data are centered vertically but aligned on the left horizontally n Horizontal and vertical alignment –align=leftvalign=top –align=centervalign=center –align=rightvalign=bottom

Tables6 Spanning Cells n Cells that span multiple rows and/or columns –Attribute of and/or –Attribute of and/or n rowspan n colspan

Tables7 Width n Width attribute n Pixels n Percentage of screen width … … n Percentage of table's width n Pixels