HTML Tutorial-Table size settings

Tutorial

Size of table

Generally, the total length and width of the table are adjusted automatically based on the sum of the rows and columns, and if we want to fix the size of the table directly, we can use the following methods:

　　　　　　　　　　　<table width=n1 height=n2>

The width and Height properties specify a fixed width and length for the table, N1 and N2 can be expressed in pixels, or percentages (proportional to the size of the entire screen).

The following table is a table with a length of 200 pixels and a width of 100 pixels. <table width= "height=" >

The following table is a 20%-screen, 10%-wide table with a screen length. <table width=20% height=10%>

Border Dimension Settings

The border is represented by the border property, which represents the border edge thickness and borders of the table. Setting the border to a different value has different effects.

Such as:

<table border=10 width=250>
<caption> Order invoice </caption>
<tr><th> apple </th><th> Banana </th><th> Grape </th>
<tr><td>200 kg </td><td>200 kg </td><td>100 kg </td>
</table>

Display results as:

Order manifest

Apple	Banana	Grape
200 kg	200 kg	100 kg

<table border=1 width= ">"
<caption> Order invoice </caption>
<tr><th> apple </th><th> Banana </th><th> Grape </th>
<tr><td>200 kg </td><td>200 kg </td><td>100 kg </td>
</table>

Show Results:

Order manifest

Apple	Banana	Grape
200 kg	200 kg	100 kg

<table border=0 width= ">"
<caption> Order invoice </caption>
<tr><th> apple </th><th> Banana </th><th> Grape </th>
<tr><td>200 kg </td><td>200 kg </td><td>100 kg </td>
</table>

Show Results:

Order manifest

Apple	Banana	Grape
200 kg	200 kg	100 kg

Line width between lattices

The line between lattice and lattice is a grid line, and its width can be adjusted using the CellSpacing property in <TABLE>. The format is:

　　　　　<table cellspacing=#> #表示要取用的像素值

Cases:

<table border=3 cellspacing=5>
<caption> Order invoice </caption>
<tr><th> apple </th><th> Banana </th><th> Grape </th>
<tr><td>200 kg </td><td>200 kg </td><td>100 kg </td>
</table>

Display results as:

Order manifest

Apple	Banana	Grape
200 kg	200 kg	100 kg

The width between the content and the grid line

We can also set the CellPadding property in <TABLE> to specify the width between the content and the grid line. The format is:

　　　　　　　　　　<table cellpadding=#>　 #表示要取用的像素值

Cases:

<table border=3 cellpadding=5>
<caption> Order invoice </caption>
<tr><th> apple </th><th> Banana </th><th> Grape </th>
<tr><td>200 kg </td><td>200 kg </td><td>100 kg </td>