How to create tables in HTML… To create an unusual table structure such as this one, how do you begin? Tables are created row by row. For each row, cells are established moving from left to right, specifying in each <td> tag if a cell spans more than one column or row, using colspan and/or rowspan

Let’s build the following table… Row 1 Row 2 Row 3 Row 4 The first step is to establish how many rows the table has? This table has 4 rows ! The number of rows is NOT established by… How many rows are in first column (This table does NOT have 2 rows) The height of rows relative to each other (This table does NOT have 5 rows) Each row is separated by the upper and lower border of at least one cell in that row.

Let’s build the following table… Row 1 Row 2 Row 3 Row 4 The first step is to establish how many rows the table has? This table has 4 rows ! One trick for identifying the number of rows is to draw lines down each of the possible columns, and find the line(s) that crosses the most number of cells. The number of cells crossed by this line(s) is how many rows the table has !

Here’s the code… Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 <table> <tr> <!- - Row 1 - -> <td colspan=4> Cell 1 </td> </tr> <tr> <!- - Row 2 - -> <td rowspan=3 width=20% > Cell 2 </td> <td colspan=3> Cell 3 </td> <tr> <!- - Row 3 - -> <td rowspan=2 width=40%> Cell 4 </td> <td> Cell 5 </td> <td> Cell 6 </td> <tr> <tr> <!- - Row 4 - -> <td colspan=2> Cell 7 </td> </table>

Some notes… Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Notice that Cell 2 is created in Row 2. Therefore, when Row 3 is being created, there does not need to be a <td> tag for cell 2 since it was already established Similarly, Cell 4 is created in Row 3. Therefore in Row 4, there are no <td> tags required for either Cell 2 or Cell 4 since they were both already established. Use the width attributes in the <td> tags to establish column widths, but only use the minimum number of width specifications necessary so as not to create conflict. The height attribute can also be used in <td> tags but you will find that its effectiveness is inconsistent.