Web Technologies and Programming Lecture 09

Web Technologies and ProgrammingLecture 092Tables in HTML3Summary of the previous lectureAdding images to web pageUsing images as linksImage mapAdding video to web pageAdding audio o web page4OutlineHow to create tablesPage lay-out using tables51. Creating HTML tablesTables display information in rows and columnsTables are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports etc.61. Creating HTML tablesAn HTML table consists of the element and one or more elements likeTables are divided into table rows with the  tag.Table rows are divided into table data with the  tag.A table row can also be divided into table headings with the  tag.71. Creating HTML tablesIn HTML tag is used to start a table while tag indicates the end of the table Table Structure tag starts a row of the table and ends the row is used to create a cell inside the row while ends the cell81. Creating HTML tablesThe contents of the cell are written between and tags tag is used to declare the cell of the heading row of the table 91. Creating HTML tablesAn HTML Table with a Border AttributeIf you do not specify a border for the table, it will be displayed without borders.A border can be added using the border attribute: 101. Creating HTML tables Name Registration No. AliFA13-BCS-00111NameRegistration No. AliFA13-BCS-0011. Creating HTML tables121. Creating HTML tables131.1 Table Attributes14Table level attributesRow level attributesCell level attributes1.1.1 Table Attributes15The Border Attribute: Indicates the presence of the border around the tableThe align Attribute: Other values for align areCenterLeftright1.1.1 Table Attributes16The bgcolor Attribute: sets the background color of the tableThe background Attribute: sets the specified image at the background of the table1.1.1 Table Attributes17The height and width Attributes:The cellpadding Attribute: The cell padding attribute is used to create a gap between the edges of a cell and its contents1.1.1 Table Attributes18The height and width Attributes:The cellspacing Attribute: The cellspacing attribute is used to create a space between the borders of each cell1.1.1 Table Attributes191.1.1 Table Attributes20HeightWidthcell paddingcell spacing1.1.1 Table Attributes21Differences Between HTML 4.01 and HTML5The "align", "bgcolor", "cellpadding", "cellspacing", "frame", "rules", "summary", and "width" attributes are not supported in HTML5.1.1.2 Row level attributes22The align Attribute: Aligns content of the rowThe bgcolor Attribute:Apply background color to rowThe background Attribute:Adds image as the background of row1.1.2 Row level attributes23The height Attributes:Change height on table rowThe width Attributes:Change width of the rowThe valign Attributes:Changes row vertical alignment241.1.2 Row level attributes251.1.2 Row level attributesRow HeightVertical Align1.1.3 Cell level attributes26The align Attribute: The bgcolor Attribute: The height and width Attributes:The valign Attributes:1.1.3 Cell level attributes27The rowspan Attributes: used when a cell should span across more than one rowsThe colspan Attribute: used when a cell should span across more than one column281.1.3 Cell level attributesNameSubjectsOOPDBALi7580NameSubjectsALi7580OOPDB1.2 Creating HTML tables Caption29An HTML Table With a CaptionTo add a caption to a table, use the  tag:1.2 Adding caption to the table tag is used to add a caption of the tableWe usually add caption before the first row of the table301.2 Creating HTML table caption31An HTML Table With a CaptionTo add a caption to a table, use the  tag:1.2 Creating HTML tables Caption32Example  Monthly savings      Month        January    1.2 Adding caption to the table331.2 Adding caption to the table34Caption1.3 Creating HTML tables - id attribute35A Special Style for One TableTo define a special style for a special table, add an id attribute to the table:1.3 Creating HTML tables - id attribute36A Special Style for One TableExample      Firstname    Lastname     Points        Eve    Jackson     94  2. Page Layout using TablesWe can use tables to define the structure of the web page372. Page Layout using Tables38HeaderLinksBodyFooter2. Page Layout using Tables39Example: Step 1 (Structure of the page)HeaderBody and linksFooter2. Page Layout using Tables40Example: Step 1 (Structure of the page)2. Page Layout using Tables41Example: Step 2 (Header section)Adding LogoTitle1.5. Page Layout using Tables42Example: Step 2 (Header section)2. Page Layout using Tables43Example: Step 3 (Links section)Links table2. Page Layout using Tables44Example: Step 3 (Links section)2. Page Layout using Tables45Example: Step 4 (body section)2. Page Layout using Tables46Example: Step 5 (footer section)Footer2. Page Layout using Tables47Example: Step 5 (footer section)Summary48Use the HTML  element to define a tableUse the HTML  element to define a table rowUse the HTML  element to define a table dataUse the HTML  element to define a table headingUse the HTML  element to define a table captionUse the CSS border property to define a borderUse the CSS padding property to add padding to cellsUse the CSS text-align property to align cell textUse the CSS border-spacing property to set the spacing between cellsUse the colspan attribute to make a cell span many columnsUse the rowspan attribute to make a cell span many rowsUse the id attribute to uniquely define one tableSummary49Creating tables in HTMLTable attributesTable level attributesRow level attributesCell level attributesPage lay-out using tablesTHANK YOU