当前位置：网站首页>Educator table labels - settings for Advanced Table Styles

Educator table labels - settings for Advanced Table Styles

2022-06-21 12:33:00 【It's a deer】

Tabular label — Advanced style settings for tables

List of articles

Tabular label — Advanced style settings for tables

The first 1 Turn off ： Concepts related to advanced table style settings

Related knowledge

Border style properties frame

The style of the outer border line of the table can use properties frame To determine the value of ,frame The values and corresponding styles are as follows ：

above： Show top border
below： Show bottom border
hsides： Show top and bottom borders
vsides： Show left and right borders
lhs： Show left border
rhs： Show right border
border： Show up, down, left and right borders
void： Don't show borders

Internal border style properties rules

The style of the inner border of the table can be attributed to rules To determine the value of ,rules The values and corresponding styles are as follows ：

all： Show all inner borders
none： Don't show inner borders
rows： Show only row borders
cols： Show only column borders
groups： Displays a border between row and column groups

Cell merge

When making slightly more complex tables , You need to merge rows or columns in the table .

Horizontal cell merging

When horizontal cells need to be merged , Can be found in <th> or <td> Tag colspan attribute , The value of the property is the number of merged cells .

Vertical cell merging

When you need to merge vertical cells , Can be found in <th> or <td> Tag rowspan attribute , The value of the property is the number of merged cells .

Customs clearance knowledge

1、 In the following options , The attribute used to set the display of the inner border line of the table is （C）.
A、border
B、frame
C、rules
D、innerborder

2、 If you want the outer border of the table to display only the upper and lower border lines , attribute frame The value of should be selected （C）.
A、hsides
B、vsides
C、lhs
D、rhs

3、 If you want the inner border of the table to show only row lines , Property rules The value of should be selected （B）.
A、line
B、rows
C、cols
D、groups

4、HTML in , If you merge two horizontal cells , The attribute that should be used is （A）.
A、colspan
B、nospan
C、rowspan
D、colwrap

5、<table rules=cols>, Express （D）
A、 Show all separator lines 
B、 Show only groups (Groups) Separation line between and group 
C、 Show only the separation line between rows 
D、 Show only the separators between columns

The first 2 Turn off ： Set the style of the table's outer border

Related knowledge

table General properties of tags

table The properties of tags usually have border、width、height、align、bgcolor、background etc. , I've already introduced , I'm not going to repeat it here .

Setting of outer border style

frame Property can be used to style the outer border of a table , Property values can be ：above、below、hsides、vsides、lhs、rhs、border、void.

for example , If the outer border of the table only needs to display the upper border , The properties are set as follows ： <table frame=above>

Programming requirements

According to the prompt , Add code to the editor on the right , In the editor on the right Begin - End Supplement code in the area , The specific requirement is ：

add to table Labels and properties , Make the width of the table 100, The height is 80, The border line thickness is set to 4.
stay table Add... To the tag frame attribute , Make the outer border of the table display as the top and bottom border style .

Customs clearance code

<html>
 <head>
  <meta charset="utf-8"/>
  <title> Set table outer border properties </title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   <table width="100" height="80" border="4" frame="hsides">
    <!-- ********* End ********* -->
    <caption> Simple information sheet </caption> 
    <tr align=center valign=middle>
      <th> full name </th>
      <th> Age </th>
    </tr>
    <tr align=center valign=middle>
      <td> Zhang San </td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

The first 3 Turn off ： Set the style of the inner border of the table

Related knowledge

Setting of table inner border properties

The inner border of the table can use rules Property to set , Its value can be all、none rows、cols、groups. for example , If the outer border of the table only needs to display the upper border , The inner border shows the column border line , The properties are set as follows ： <table frame=above rules=cols>

Programming requirements

According to the prompt , Add code to the editor on the right , In the editor on the right Begin - End Supplement code in the area , The specific requirement is ： 1. add to table Labels and properties , Make the width of the table 100, The height is 80, The border line thickness is set to 4 2. stay table Add... To the tag frame attribute , Make the outer border of the table display as the top and bottom border style . 3. stay table Add... To the tag rules attribute , Causes the inner border of the table to be displayed as a row border line style .

Customs clearance code

<html>
 <head>
  <meta charset="utf-8"/>
  <title> Set table inner border properties </title>
 </head>
  <body>
   <!-- ********* Begin ******* -->
   <table width="100" height="80" border="4" frame="hsides" rules="rows">
    <!-- ********* End ********* -->
    <caption> Simple information sheet </caption> 
    <tr align=center valign=middle>
      <th> full name </th>
      <th> Age </th>
    </tr>
    <tr align=center valign=middle>
      <td> Zhang San </td>
      <td>20</td>
    </tr>
   </table>
  </body> 
</html>

The first 4 Turn off ： Merging of cells in a table

Related knowledge

Horizontal cell merging

Merge two or more horizontal cells , Can be in th or td Use in Tags colspan Property to set , The value of the property is the number of merged cells . Usage examples ： Examples are as follows ：

<tr>
	<th> full name </th>
    <th colspan="4"> Sign in </th>
    <th> remarks </th>
</tr>

Vertical cell merging

Merge two or more vertical cells , Can be in th or td Use in Tags rowspan Property to set , The value of the property is the number of merged cells . Usage examples ：

<tr> 
	<td rowspan="2"> Leader's speech  </td>  
	<td> Theme report of the conference </td>
    <td> Special report of the branch </td>  
    <td rowspan="2"> Summary report </td>
</tr>
<tr>   
	<td> Expert reports </td> 
    <td> Group discussion </td>
</tr>

Programming requirements

According to the rendering of the task description , stay Begin-End Supplement code in the area , Create a 3 That's ok 4 Check in form for column , The specific requirements are as follows ：

“ full name ” and “ remarks ” Cells merge two cells vertically
“ Sign in ” Cells merge two cells horizontally
“ full name ”“ Sign in ”“ The first 1 Time ”“ The first 2 Time ”“ remarks ” The cells form the item header , Please use the item header cell label to realize ; The cells in the third row are data cells , Please use the data cell label to realize .

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title> Sign in form </title>
    <style type="text/css"> th{
      background-color:#00ff33;} td{
      background-color:#00ffff;} </style>
 </head>
 <body> 
    <table border="2" width="400" bordercolor="#00ff00" cellpadding="6">
        <caption> Sign in form </caption>
      <!-- ********* Begin ********* -->
      <tr>
         <th rowspan="2"> full name </th>
         <th colspan="2"> Sign in </th>
         <th rowspan="2"> remarks </th>
      </tr>
      <tr>
         <th> The first 1 Time </th>
         <th> The first 2 Time </th>
      </tr>
      <tr>
         <td> Zhang San </td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <!-- ********* End ********* -->
    </table>   
 </body>
</html>

The first 5 Turn off ： A comprehensive case of the table

Task description

Our mission ： Create a file with the title “ Family bills ” Table for . The effect is shown in the figure below ：

Family bill renderings

Programming requirements

According to the target effect prompted by the task description , Add code to the editor on the right , Create a project called “ Family bills ” Table for , Requirements are as follows ：

1. Add the background image shown in the following figure to the whole web page , Its URL by https://www.educoder.net/api/attachments/1217848;

Form background

2. The table border is 2px; The width of the table is 600;bordercolor by #00ff00;cellpadding by 6; The table is centered in the web page ;

3. The title of the table is “ Family bills ”;

4. Styles such as the background of the cell are already in the header style Set... In the tag , Please refer to the renderings in the task description for the contents and merging requirements of each cell , Note that the cells in the green display area should be set as the item header , The cells in the cyan display area should be set as data cells .

Customs clearance code

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title> Table synthesis </title>
    <style type="text/css"> th{
      background-color:#00ff33;} td{
      background-color:#00ffff;text-align:center} caption{
      font-family: In black ;font-size:30px;color:blue} </style>
 </head>
<!-- ********* Begin ********* -->
 <body background="https://www.educoder.net/api/attachments/1217848">
   <table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center">
      <caption> Family bills </caption>
      <tr>
         <th rowspan="2" colspan="2"> This week's project </th>
         <th colspan="2"> Expense details </th>
         <th rowspan="2"> remarks </th>
      </tr>
      <tr>
         <th> income </th>
         <th> spending </th>
      </tr>
      <tr>
         <th rowspan="3"> income </th>
         <th> Wages </th>
         <td>10000</td>
         <td>0</td>
         <td></td>
      </tr>
      <tr>
         <th> Part-time job </th>
         <td>2000</td>
         <td>0</td>
         <td></td>
      </tr>
      <tr>
         <th> Total income </th>
         <td>12000</td>
         <td>0</td>
         <td></td>
      </tr>
      <tr>
         <th rowspan="3"> spending </th>
         <th> Articles for daily use </th>
         <td>0</td>
         <td>4000</td>
         <td></td>
      </tr>
      <tr>
         <th> Tuition and miscellaneous expenses </th>
         <td>0</td>
         <td>3000</td>
         <td></td>
      </tr>
      <tr>
         <th> Total expenditure </th>
         <td>0</td>
         <td>7000</td>
         <td></td>
      </tr>
   </table>
 </body>
<!-- ********* End ********* -->
</html>