HTML Tables The key to creating HTML tables is to think in rows! http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span Basic Table Structure
Tables in HTML always start with the <TABLE> tag and end with </TABLE> Everything between these tags will be included in the table. Every table is made up of rows which are created using the <TR> tag and closed with </TR>. Within the rows are individual data cells (not columns) created using <TD> and </TD>
Table with row / one column
The <TABLE> tag has been opened and the border of 1 pixel wide has been included. The <TR> tag shows that the first row is being opened The <TD> tag shows that the first data cell in that row is being added. The </TD> closes that data cell The </TR> then closes the row The </TABLE> then closes the table
Table with one row and three columns
The <TABLE> tag has been opened and the border of 1 pixel wide has been included. The <TR> tag shows that the first row is being opened The <TD> tag shows that the first data cell in that row is being added. The </TD> closes that data cell. The second <TD> tag shows that the second data cell is being added to the same row. The </TD> closes that data cell. The third <TD> tag shows that the third data cell is being added to the same row. The </TD> closes that data cell. The </TR> then closes the row The </TABLE> then closes the table
Table with two rows and three columns
The <TABLE> tag has been opened and the border of 1 pixel wide has been included. The <TR> tag shows that the first row is being opened The <TD> tag shows that the first data cell in that row is being added. The </TD> closes that data cell. The second <TD> tag shows that the second data cell is being added to the same row. The </TD> closes that data cell. The third <TD> tag shows that the third data cell is being added to the same row. The </TD> closes that data cell. The </TR> then closes the row The second <TR> tag shows that a second row is being added. The <TD> tag shows that the first data cell in that row is being added. The </TD> closes that data cell. The second <TD> tag shows that the second data cell is being added to the same row. The </TD> closes that data cell. The third <TD> tag shows that the third data cell is being added to the same row. The </TD> closes that data cell. The </TR> then closes the row The </TABLE> then closes the table
Cell than spans two columns (using table headings)
The table is created using the <TABLE> tag inside which the border size (1 pixel) has included The first row is created using the <TR> tag The <TH> tag has been used in the first row to show that the first cell contains a column header. This is then closed using the </TH> tag. The second cell in the first row is created using the <TH> tag to show that a second heading is being used. This time colspan=”2” has been included to show that the heading is going to be two data cells wide. It is then closed using the </TH> tag The first row is closed using the </TR> tag The second row is opened using the <TR> tag Three data cells are created, each using the <TD> data cell tag to open and the </TD> tag to close. The second row is then closed using the </TR> tag The table is then completed using the </TABLE> tag
Cell than spans two columns (not using table headings)
The table is created using the <TABLE> tag inside which the border size (1 pixel) has included The first row is created using the <TR> tag The <TD> tag has been used in the first row to create the first data cell and closed using </TD> The second cell in the first row is created using the <TD> tag. This time colspan=”2” has been included to show that the data cell is going to be two cells wide. It is then closed using the </TD> tag The first row is closed using the </TR> tag The second row is opened using the <TR> tag Three data cells are created in the second row, each using the <TD> data cell tag to open and the </TD> tag to close. The second row is then closed using the </TR> tag The table is then completed using the </TABLE> tag
Cell than spans two rows (using table headings)
The table has been created using the <TABLE> tag and inside this the border has been set at 1 pixel wide. The first row is created using the <TR> tag. The first heading is in the first cell using the <TH> tag and closed with the </TH> tag The second cell in the first row is created using a data cell tag <TD> and closed with the </TD> tag The first row is then closed using the </TR> tag The second row is opened with the <TR> tag The first cell in the row is a heading shown by the <TH> tag and that it is going to be two rows high shown by the rowspan=”2” being included. The heading cell is then closed using </TH> The second cell of the second row is then added using the <TD> tag and closed using </TD> The third row is then opened using the <TR> tag There is no cell in the first cell of the third row as the first cell of the second row covered was two rows high. The <TD> tag in the third row must refer to the second column and is closed using </TD> The row is then closed using </TR> The table is then closed using </TABLE>
Cell than spans two rows (using table headings)
The table has been created using the <TABLE> tag and inside this the border has been set at 1 pixel wide. The first row is created using the <TR> tag. The first data cell in the row is created with the <TD> tag and closed with the </TD> tag The second cell in the first row is created using a data cell tag <TD> and closed with the </TD> tag The first row is then closed using the </TR> tag The second row is opened with the <TR> tag The first data cell in the row is created using the <TD> tag It is going to be two rows high shown by the rowspan=”2” being included. The data cell is then closed using </TD> The second cell of the second row is then added using the <TD> tag and closed using </TD> The third row is then opened using the <TR> tag There is no cell in the first cell of the third row as the first cell of the second row was two rows high. The <TD> tag in the third row must refer to the second column and is closed using </TD> The row is then closed using </TR> The table is then closed using </TABLE>
Complex Table (using combination of rowspan and colspan) - 1 This table is as complex as you will be asked to build. Before starting on your code, try to plan the table by breaking it into rows (<TR> ) and cells (<TD>). 1st row: ‘A’ spanning two rows (rowspan=”2”; ‘B’ on one row but spanning two columns (colspan=”2”); ‘C’ spanning two rows (rowspan=”2”). 2nd Row: as A, B and C have been included above; only ‘D’ is needed on this row, spanning two columns (colspan=”2”) 3rd Row: There is no merging of cells here, so each cell has its own <TD> 4th Row: ‘I’ spans across 4 columns (colspan=”4”) 5th Row: same layout as row 3 with 4 x <TD>, now spans 6th Row: Same as row 4 (colspan=”4”) 7th Row: Same as rows 4 & 6 (colspan=”4”)
The HTML code for this table is: The table is opened with the <TABLE> which includes the border as 1 pixel. As per the plan above, there are seven rows Look through how the contents of each row have been coded in relation to the plan above.
Complex Table (using combination of rowspan and colspan) â&#x20AC;&#x201C; 2
Complex Table (using combination of rowspan and colspan) â&#x20AC;&#x201C; 3