Tables in HTML

Tables in HTMLBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.1Summary of the previous lectureAdding images to web pageUsing images as linksImage mapAdding audio and video to web pageBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2OutlineHow to create tablesPage lay-out using tablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31. 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.Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.41. 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 cellBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.51. 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 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.61. Creating HTML tables Name Registration No. AliFA13-BCS-001Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.7NameRegistration No. AliFA13-BCS-0011. Creating HTML tablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.81. Creating HTML tablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.91.1 Table AttributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.10Table level attributesRow level attributesCell level attributes1.1.1 Table AttributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.11The Border Attribute: Indicates the presence of the border around the tableThe align Attribute: The bgcolor Attribute: sets the background color of the tableThe background Attribute: sets the specified image at the background of the table1.1.1 Table AttributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.12The height and width Attributes:The cellpadding Attribute: The cellpadding attribute is used to create a gap between the edges of a cell and its contentsThe cellspacing Attribute: The cellspacing attribute is used to create a space between the borders of each cell1.1.1 Table AttributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.131.1.1 Table AttributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.14HeightWidthcellpaddingcellspacing1.1.2 Row level attributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.15The align Attribute: The bgcolor Attribute:The background Attribute:The height and width Attributes:The valign Attributes:Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.161.1.2 Row level attributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.171.1.2 Row level attributesRow HeightVertical Align1.1.3 Cell level attributesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.18The align Attribute: The bgcolor Attribute: The valign Attributes:The 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 columnBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.191.1.3 Cell level attributesNameSubjectsOOPDBALi7580NameSubjectsALi7580OOPDB1.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 tableBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.201.2 Adding caption to the tableBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.211.2 Adding caption to the tableBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.22Caption2. Page Layout using TablesWe can use tables to define the structure of the web pageBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.232. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.24HeaderLinksBodyFooter2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.25Example: Step 1 (Structure of the page)HeaderBody and linksFooter2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.26Example: Step 1 (Structure of the page)2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.27Example: Step 2 (Header section)Adding LogoTitle1.5. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.28Example: Step 2 (Header section)2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.29Example: Step 3 (Links section)Links table2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.30Example: Step 3 (Links section)2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31Example: Step 4 (body section)2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.32Example: Step 5 (footer section)Footer2. Page Layout using TablesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.33Example: Step 5 (footer section)SummaryBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.34Creating tables in HTMLTable attributesPage lay-out using tablesChapter 4, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 35Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References