Using rowspan and colspan attributes

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

INTRODUCTORY Tutorial 8 Creating Data Tables. XP Objectives Contrast data tables with layout tables Create a table to display and organize data Provide.
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.
Spanning Rows and Columns Mrs. Wilson Internet Basics & Beyond.
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.
Exploring the Internet Creating web pages with 2-d layout Instructor: Michael Krolak Instructor: Patrick Krolak See also
Tables. Tables2 Terminology Caption Headings Cell Data.
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.
Lesson 6. Links in HTML Computer Science Welcome to Virtual University in Pakistanhttp://
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.
How to create tables in HTML…
INTRODUCTORY Tutorial 7 Creating Tables. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Discern the difference between data tables and.
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.
The Teacher Computing HTML (2) HyperText Markup Language.
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.
1 TECH1001 Lecture 6 Electronic Publishing and Production 1 More About Tables.
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.
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.
Assistant Professor,UCER Naini,Allahabad
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.
Make an HTML table using Visual Studio. Approach 1: drag table from Toolbox.
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.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
Advanced Tables. Spanning Columns and Rows: So far, our tables have been relatively simple, with a uniform grid of rows and columns: XHTML allows us to.
1 R3 R1 R5 R4 R6 R2 B B A A Looking at the Code Under the View menu Select Source.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
Advanced Tables.
Organizing Content with Lists and Tables
Getting Started – Table 2
HTML Tables CS 1150 Spring 2017.
Introduction to HTML.
H T M L A B E S X P I N D.
HTML Tables CS 1150 Fall 2016.
HTML Table Teacher: Ms. Olifer.
Creating Tables Steps for creating a Table Important Facts about Table
TABLES, LISTS & IMAGES.  Tables are defined with tag.  Table is divided into rows and columns.  Table must have at least one row and one column  Table.
Creating Tables Steps for creating a Table Important Facts about Table
Advanced Tables.
Implementing Tables to Hold Data in HTML
Usually use background-color:
Using rowspan and colspan attributes
H T M L A B E S X P I N D.
Site Development Foundations Lesson 6
Creating Tables Steps for creating a Table Important Facts about Table
Lesson 5: HTML Tables.
1.3 TABLES.
H T M L A B E S X P I N D.
Hypertext Markup Language Table 11th Lecture
Advanced Tables.
Presentation transcript:

Using rowspan and colspan attributes Creating Tables Using rowspan and colspan attributes

Introduction By default a cell appears in one row and one column. However using rowspan and colspan attribute on individual cell <td> tag, you can cause a cell to span multiple rows and columns. When using rowspan and/or colspan attribute, always remember where the cell starts.

Rowspan Attribute Rowspan causes a cell to stretch downward to the rows below If you want to make a cell go across several rows, use rowspan attribute with the <td> tag. Rowspan can only extend a cell into the next row if there is room in that row 1 2 3 4 5 6

Colspan Attribute Colspan causes a cell to extend to the right into columns on the right. If you want to make a cell go across several columns, use colspan attribute with the <td> tag. Colspan can only extend a cell into the next column if there is room in that column 1 2 3 4 5 6