How to Use Span to Make Columns
Tables are a useful way to list and organize information on a website. Web designers can build tables of many lengths and sizes, using HTML coding to create the table that works best for the information they want to display. In HTML coding, "colspan" is an attribute you can add to a table to expand a row across a number of columns. This is especially useful if you want to create table headers that span the entire length of the table.
Other People Are Reading
Instructions
-
-
1
Copy the following HTML coding:
<TABLE BORDER="1">
<TR> <TH COLSPAN=2>Table Header</TH> </TR>
<TR> <TD>Cell</TD> <TD>Cell</TD> </TR>
<TR> <TD>Cell</TD> <TD>Cell</TD> </TR>
</TABLE> -
2
Paste the code into the HTML coding of your Web page. This will create a simple HTML table. The "COLSPAN=2" attribute makes the "Table Header" row span both columns in the table.
-
-
3
Add more columns to your table by adding more code between the <TR> and </TR> tags. For example, if you want to display three columns in your table, you would change the code to <TR> <TD>Cell</TD> <TD>Cell</TD> <TD>Cell</TD> </TR>. This code represents a complete row of the table and should be typed all on the same line.
-
4
Copy the code from the row you edited in Step 3 and replace the code in each subsequent row with this new code. This will give all of the rows in the table the same number of columns.
-
5
Increase the number next to the "COLSPAN" attribute to make the "Table Header" row span the length of the altered table. For example, if you increase the number of columns in your table to three, change the attribute to "COLSPAN=3."
-
6
Copy the code from an existing row in your table and paste it above the </TABLE> tag if you need to add more rows. Make sure that all new rows you create in your table have the same number of columns as the rest of your rows.
-
7
Replace the "Table Header" and "Cell" text with your own table information.
-
8
Save the changes to your Web page's HTML code and publish the changes to your website.
-
1
Tips & Warnings
You can also use the tag <TD COLSPAN=2> if you want to expand a regular row that is not a table header.
