CSS Control Table table width Tips Tutorial

Definition of Table table width is defined with the width width attribute within the table label, and the width can be defined by the CSS style setting, and you can choose the definition width method that you want to apply.

One, HTML table label inside width definition

We add the width width attribute directly to the table label to define the widths as follows:

<table width= ">"

This defines a table width of 300px, remembering that the value of this width does not need to have an HTML length unit, which is the default pixel px.

Two, CSS definition table width

CSS defines the table width of CSS code as follows:

table{width:300px}

This allows you to define a table width of 300px in the page by CSS, which is not very good, of course, if you use a table layout in more than one page, it is not appropriate to define the width of tables.

So we need to create a new CSS named a class, which is named ". Divcss5", and the CSS style is as follows:

table.divcss5{width:300px}

Or

. divcss5{width:300px}

corresponding Table label application:

<table class= "DIVCSS5" ></table>

This will only have a table width of 300px in the table table that joins the "Divcss5" class, which distinguishes the use of table tables from multiple occurrences of a Web page.

Third, summary

Define width properties, whether Div, span or table, we can use the above CSS to define the width method.

CSS Control TD width

Generally set the width of the TD, usually for a group of labels in a set of width, or set up in many pairs of each TD tag to set a different width, then we need to TD plus a class or ID selector (how to select Class and ID) There are several different we do a new class or ID, To differentiate with other sibling TD tags.

Examples are as follows:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

If the table has a total width of 300 and the 3 width is convenient for 100px,150px,200px, we need to create a new named three different class selector, CSS code as follows:

. divcss5-td-1{width:100px}
. divcss5-td-2{width:150px}
. divcss5-td-3{width:200px}

The corresponding HTML source code is as follows:

<table>
<tr>
<TD class= "Divcss5-td-1" > width is 100px</td>
<TD class= "Divcss5-td-1" > My width is 150px</td>
<TD class= "Divcss5-td-1" > My width is 200px</td>
</tr>
</table>

Width is 100px my width is 150px my width is 200px

Screenshot of Effect:

Use CSS to set the case screenshot for TD width

Above use CSS to set TD width method and case, hope to be helpful to you.

Extended understanding, directly to the HTML TD tag set width, we direct TD tag to add width of the property can be, the HTML source code is as follows:

<table>
<tr>
<td width= "M" > width is 100px</td>
<TD width= > My width is 150px</td>
<TD width= > My width is 200px</td>
</tr>
</table>

Width is 100px my width is 150px my width is 200px

Screenshot of Effect

Direct TD tags within the set width screenshot

Direct TD tab set width and value

Note that it is not necessary to add the length of the page in the TD tag directly to set the width of the value of the property.

The above is the use of CSS set TD width and HTML TD tags directly set width method, I hope to master and flexible use, and sometimes use the CSS TD width sometimes the TD tag directly add width, which needs to choose according to demand.