TABLES 6 How to create tables What information suits tables How to represent complex data in tables.

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

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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.
 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.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
 Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results etc.  Tables, just like spreadsheets,
CIS 1310 – HTML & CSS 8 Tables. CIS 1310 – HTML & CSS Learning Outcomes  Create a Table  Apply Attributes to Format Tables  Increase the Accessibility.
Tables in HTML Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
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.
Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.
Chapter 9 Table Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
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 TECH1001 Lecture 6 Electronic Publishing and Production 1 More About Tables.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
 2003 Prentice Hall, Inc. All rights reserved. Introduction to HTML: Tables Outline 1 Introduction 2 Basic HTML Tables 3 Intermediate HTML Tables and.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
آموزش طراحی وب سایت جلسه دوم – جداول تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 8 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML Tables The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
Chapter 9 Table Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Tutorial 5: Tables Session OBJECTIVES Create a table Insert a table summary Insert a table caption Add rows and cells Merge Cells inside a Table.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
Tables creating a table within a web page. What makes up a table? Columns Rows.
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: 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.
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.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
HTML Tables. Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag).
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Advanced Tables.
Organizing Content with Lists and Tables
Web Development & Design Foundations with HTML5
Working with Tables: Module A: Table Basics
Web Development & Design Foundations with HTML5 8th Edition
HTML Tables CS 1150 Spring 2017.
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
H T M L A B E S X P I N D.
HTML Tables CS 1150 Fall 2016.
8 Tables.
Web Design and Development
Web Development & Design Foundations with H T M L 5
Introduction to XHTML Cont:.
WHAT'S A TABLE? Explain: The types of information commonly displayed in tables include stocks and shares, sports results, train timetables and price.
Using rowspan and colspan attributes
Advanced Tables.
Implementing Tables to Hold Data in HTML
Using rowspan and colspan attributes
Web Development & Design Foundations with HTML5
Site Development Foundations Lesson 6
Lesson 5: HTML Tables.
1.3 TABLES.
Hypertext Markup Language Table 11th Lecture
Advanced Tables.
Web Development & Design Foundations with HTML5
Basics of Web Design Chapter 9 Table Basics Key Concepts
Presentation transcript:

TABLES 6 How to create tables What information suits tables How to represent complex data in tables

TABLES Use the four key elements for creating tables Represent complex data using tables Add captions to tables

WHAT'S A TABLE? A table represents information in a grid format.Examples of tables include financial reports, TV schedules, and sports results.

BASIC TABLE STRUCTURE The element is used to create a table. The contentsof the table are written out row by row. You indicate the start of each row using the opening tag.(The tr stands for table row.) It is followed by one or more elements (one for each cell in that row). At the end of the row you use a closing tag Each cell of a table is represented using a element. (The td stands for table data. At the end of each cell you use a closing tag..

BASIC TABLE STRUCTURE

TABLE HEADINGS The element is used just like the element but its purpose is to represent the heading for either a column or a row. (The th stands for table heading.)

TABLE HEADINGS

SPANNING COLUMNS

SPANNING ROWS

LONG TABLES The headings of the table should sit inside the element. The body should sit inside the element. The footer belongs inside the elemen

LONG TABLES

SUMMARY TABLES The element is used to add tables to a web page. A table is drawn out row by row. Each row is created with the element Inside each row there are a number of cells represented by the element (or if it is a header) You can make cells of a table span more than one row or column using the rowspan and colspan attributes. For long tables you can split the table into a,, and.