Internet Applications Development Lecture 6 L. Obead Alhadreti.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Six Tables.
Advertisements

HTML TABLES EXPLAINED. What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields,
Using HTML Tables Presenting Information & Layout Control.
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.
Internet Basics & Way Beyond!
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 Table1.html 1 2
Spanning Rows and Columns Mrs. Wilson Internet Basics & Beyond.
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
Using HTML Tables.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
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.
What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields, other tables, etc. Tables.
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.
Identifies the Structure Table Row Column 1 Table Heading Column 2.
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…
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
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.
>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.
HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►
Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to:  Create tables.
Columns run horizontally in tables and rows run from left to right.
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.
Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.
Copyright 2006 South-Western/Thomson Learning Chapter 12 Tables.
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.
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.
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.
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.
CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 2 1.Create a new document 2.Save as L/bsba/IS330/yourfolder,
Internet Applications Development Lecture 4 L. Obead Alhadreti.
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.
1 Chapter 04: Working with Table By Tharith Sriv.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
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 IN HTML No, not that kind of table!! THIS KIND!!
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
CIS101 Introduction to Computing Week 07 Spring 2004.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
>> 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.
TABLES.
Web Design and Development
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.
Presentation transcript:

Internet Applications Development Lecture 6 L. Obead Alhadreti

Lecture Outline: Inserting Tables.

Tables are considered as one of the most common tools used in HTML, as most of web sites use them today in a way or another. The main tags used with tables in HTML are as follows: Define tables …. Define row... Define data …

Example:

There is another tag used often when table is created. It is known as table headings …. It is an optional tag that used to define the top cells in the table. The text inside these cells should be bold. There is also another tag used with tables: ….. It is used to define a unique title for the tables. It is inserted immediately after the start tag of the table element.

Example: الدول و العواصم الدولة العاصمة السعودية الرياض العاصمهالدولة الرياضالسعودية الدول و العواصم

Table attributes: borderUsed to add borders to a table widthUsed to specify the width of a table. ‎ ‎ ‎ heightUsed to specify the height of a table. ‎ ‎ ‎

alignTo specify the alignment of the table horizontally. It takes the following values: right, center, left. ‎ bgcolorUsed to specify the background color of a table.

Merging the cells To margin the cells, we use the colspan attribute to merge more than one columns, and rowspan to merge more than one rows. Example:

Examples:

Assignment

Questions ? Be active !