CSCI 121 - Lecture 6 - Tables

Topics Covered

1. <TABLE> - Table
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
• By default, table headings are bold and centered.
• A table data/cell is defined with the <td> tag.
2. <TR> - Table Row
• Defines the start and end of a row in a table.
3. <TH> - Table Header
• Header cell of a table.
4. <TD> - Table Data
• A single cell of a table.
• Must be within a table row.
5. Alignment - Aligning text within cells
• th {
       vertical-align: center;
       text-align: center;
  }
  
6. <colspan> - Column span attribute
• Make a cell span multiple columns
• colspan="2"
7. <rowspan> - Row span attribute
• Make a cell span multiple rows
• rowspan="2"
8. <CAPTION> - Table Caption Tag
• Provide a caption for a table.
• Include after the table open tag, but before the table header row.
9. Changing style through use of Class attribute
• Add this to the <STYLE> section:
  

                      table.table1 { border: 1px solid; }        
                      table.table1 th { border: 1px solid; }
                      table.table1 td { border: 1px solid; }
                      

• And when declaring table specify class:
  

                      <table class="table1">
                      

10. Nested Tables - Yeah, it can get confusing!
• Can have a table within a TD of another table - do so sparingly