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.

Slides:



Advertisements
Similar presentations
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.
Advertisements

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
Working with Web Tables
 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.
1 HTML Tables. 2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even the most complex tables use just the following three.
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.
Using HTML Tables.
Instructor: A. Burns 1 HTML Tables. Instructor: A. Burns 2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even the most.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
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.
Images and Tables. Displaying Image Attributes: SRC= " mypic.gif " – Name of the picture file SRC= " pic/mygif.jpg " – Name of file found in pic directory.
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.
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…
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.
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.
10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
1 Web Developer Foundations: Using XHTML Chapter 3 XHTML Hyperlinks and Tables.
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.
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.
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 in HTML. Table Tag HTML tables always begin and end with a table tag. Syntax:
 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.
Tables Attributes Image Map.  Tables are defined with the tag.  A table is divided into rows with the tag.  Each row is divided into data cells with.
How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.
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.
Internet Applications Development Lecture 6 L. Obead Alhadreti.
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.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
TABLES IN HTML No, not that kind of table!! THIS KIND!!
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: Tables.
LAB Work 02 MBA 61062: E-Commerce
Introduction to HTML.
Chapter 5 - Introduction to XHTML: Part 2
TABLES.
Creating Tables Steps for creating a Table Important Facts about Table
Табеле Табеле се представљају елементом TABLE.
Creating Tables Steps for creating a Table Important Facts about Table
Using HTML Tables SWBAT: - create tables using HTML
TABLES.
HTML Tables & Frames Internet Technology.
Site Development Foundations Lesson 6
Creating Tables Steps for creating a Table Important Facts about Table
Lesson 5: HTML Tables.
HTML Tables & Frames Internet Technology.
Presentation transcript:

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.

Cont. example First Row First Row

Table attributes border Specifying table sizes (width-height) You can specify width for a table both in percents of page width and in pixels. Example : Cell Row1 Col1 Cell Row1 Col2 Cell Row2 Col1 Cell Row2 Col2

Cont. determine table width in pixels. Cell Row1 Col1 Cell Row1 Col2 Cell Row2 Col1 Cell Row2 Col2

Cont. You can specify table height too. In this way you can determine height and width of table. Width and height of table will be divided between cells in rows and columns so if table width is 100 and there are 2 columns then width of each cell will be 50. if you put a lot of text in a cell of a table it will be expanded to fit the text in it.

Text alignment in table cells or // by default

vertical alignment Use VALIGN option to tag (TOP, BOTTOM and MIDDLE. MIDDLE is default. Example : sami engineer ali doctor

Merge cells colspan and rowspan attributes in the... tags. Eg. Column merging b b

Cont. Row merging jhgjhghg hgfhbvv jjj

Images in table cells inserting tag between tags of a certain cell.