 Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results etc.  Tables, just like spreadsheets,

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Six Tables.
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.
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.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 Table1.html 1 2
© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
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.
XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.
Using HTML Tables.
1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.
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.
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.
Tutorial #8 – Creating Data Tables. Tutorial #6 Review – Layouts Two Column Fixed Width, Three Column Fixed Width Class VS. ID Container Universal Selector.
Tables in HTML Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
XHTML1 Tables N100 Creating a Simple Web Page. XHTML2 Creating Basic Tables Tables are collections of rows and columns that you use to organize and display.
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.
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
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.
INTRODUCTORY Tutorial 7 Creating Tables. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Discern the difference between data tables and.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 2.
Word Lesson 7 © 2009 M and K Solutions, LLC -- All Rights Reserved.
Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.
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.
Tutorial 5 Working with Tables and Columns
Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.
Tutorial 5 Working with Tables and Columns
HTML (Hypertext Markup Language) – Class 3 Recap: HTML Special Characters (ex: ©). Including Images – using the tag. Lists – Ordered and Unordered.
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.
ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables Created as a way to present rows and clumns of data.
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.
Tables in HTML. Table Tag HTML tables always begin and end with a table tag. Syntax:
Lesson 7. Tables Table Tags and Attributes Tables HTML tables are used in two main ways: 1.To organize tabular data in a familiar spreadsheet-like way.
 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.
آموزش طراحی وب سایت جلسه دوم – جداول تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
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 Tables The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into.
Using Tables for Layout INP150 Session #8. Layout Map out your page Design with paper and pencil Determine number of rows and columns you need Determine.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.
Doing TABLES Creating Tables in HTML. Start creating the table by using the Table container tag.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
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.
TABLES IN HTML No, not that kind of table!! THIS KIND!!
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
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.
1 Mansoor Ahmed Bughio. 2 HTML TABLES With HTML you can create tables. Examples Tables This example demonstrates how to create tables in an HTML document.
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
Working with Tables: Module A: Table Basics
>> HTML: Tables.
LAB Work 02 MBA 61062: E-Commerce
HTML Tables CS 1150 Spring 2017.
H T M L A B E S X P I N D.
TABLES.
Web Design and Development
Web Development & Design Foundations with H T M L 5
Site Development Foundations Lesson 6
Presentation transcript:

 Tables are commonly used to display all manner of data, such as timetables, financial reports, and sports results etc.  Tables, just like spreadsheets, are made up of rows and columns.  Each rectangle is known as a cell. A row is made up of a set of cells on the same line from left to right, while a column is made up of a line of cells going from top to bottom.

element- Creates a table.  Inside the element, the table is written out row by row.  A row is contained inside a element — which stands for table row.  And each cell is then written inside the row element using a element — which stands for table data.  element- used to add header Key point: Each cell must be represented by either a or a element in order for the table to display correctly even if that element is empty.

BSCS 24 Students MCS 18 Students

 Border  Bordercolor  Width  Align  Bgcolor  Cellpadding (used to create a gap between the edges of a cell and its contents)  Cellspacing (used to create a space between the borders of each cell)  Dir (supposed to indicate the direction of text that is used in the table. Possible values are ltr for left to right text and rtl for right to left for languages such as Hebrew and Arabic)

 Rules(used to indicate which inner borders of the table should be displayed, such as rows and columns.)

 Splitting a table into three sections: a head, body, and foot  Captioning tables  Using the rowspan and colspan attributes to make cells stretch over more than one row or column  Grouping columns using the element  Sharing attributes between unrelated columns using the element

 Tables can be divided into three portions: a header, a body, and a foot. ❑ to create a separate table header ❑ to indicate the main body of the table ❑ to create a separate table footer  The head and foot are rather similar to headers and footers in a word-processed document, which remain the same for every page, while the body is the main content of the table.

 Gives the Caption to the table  Use the element after the opening tag and before the first row or header

 The colspan attribute allows a cell to stretch across more than one column.  The rowpsan attribute does much the same thing as the colspan attribute, but it works in the opposite direction; it allows cells to stretch vertically across cells.

Table Practices This is the Advanced table header This is the Advanced table footer BSCS 24 Students MCS 18 Students

 you can group one or more adjacent columns together using the element. It is particularly helpful when two or more adjacent columns contain similar types of information.  This allows you to apply formatting to the group of columns rather than having to style each column separately.

Test1 Test2 Test3 Test4 Test5 Test6 Test7 Test8 Test9 Test10 Test11 Test12

 The element can be used to perform a similar role as the element, but without actually implying a structural group of columns. It can also be used to indicate that just one column needs formatting different from the rest of the group.  The elements are always empty elements, and are therefore used only to carry attributes, not content.

Test1 Test2 Test3 Test4 Test5 Test6 Test7 Test8 Test9 Test10