Setting HTML Table And Column Widths - Web

Setting HTML Table and Column Widths

The HTML TABLE tag is the opening tag used to create a table within a web page. You can specify your HTML TABLE width as a set number value or use a percentage.

Set HTML Table Width in Pixels

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="200"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE>

Browser View:

Column 1 Column 2

Set HTML Table Width as a Percentage

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="50%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE>

Browser View:

Column 1 Column 2

Set HTML Table Column Width in Pixels

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="300"> <TR> <TD WIDTH="100">Column 1</TD> <TD WIDTH="200">Column 2</TD> </TR> </TABLE>

Browser View:

Column 1 Column 2

Set HTML Table Column Widths as a Percentage

In addition, you can set the widths of your TABLE columns to display your columns at a specific width. In the following example, the column widths are set to 50%.

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD WIDTH="50%">Column 1</TD> <TD WIDTH="50%">Column 2</TD> </TR> </TABLE>

Browser View:

Column 1 Column 2

In the following example, the first column width is set to 25% and the second column is set to 75%.

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD WIDTH="25%">Column 1</TD> <TD WIDTH="75%">Column 2</TD> </TR> </TABLE>

Browser View:

Column 1 Column 2

More Web Design Tips

Từ khóa » Html Table Set Column Width Css