Detailed explanation of table in html

This article mainly introduces the table in HTML. Interested friends can refer to it. I hope it will be helpful to everyone.

1. Ordinary table, a simple HTML table consists of table element and tr, td and th elements, where tr refers to the table row, td refers to the cell, and th defines the header. Just leave the empty cells unfilled, or use  .

<table>	
<tr>		
<th>表头</th>		
<th>表头</th>		
<th>表头</th>	
</tr>	
<tr>		
<td>单元格1
</td>		
<td></td>		
<td>单元格3</td>	
</tr>	
</table>

2. A table with borders. The border element represents the border of the table. The default unit is px. Cellspcing represents the spacing between tables. Cellpadding represents the inner margin/padding distance.

<table border="1" cellspacing="10" cellpadding="30">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>

3. Tables with background images or colors. Note: bgcolor represents color, and background cannot directly add color to html. (This sentence is wrong Yes, the method used is wrong. The format of directly using inline style writing is style="background:red" or style="background-color:red"). Adding it to the table means setting the entire table. If it is used separately Settings in tr or td are settings for individual rows or cells.

##

<table border="1">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>

4. For tables that span rows and columns, rowspan means across rows, colspan means across columns, and across If the column is deleted, it will be deleted in the current table row. If it spans multiple rows, it will be deleted in the table row below.

<table border="1">
	<caption>跨行</caption>
		<tr>
		  <th>姓名</th>
		  <td>Bill Gates</td>
		</tr>
		<tr>
		  <th rowspan="2">电话</th>
		  <td>555 77 854</td>
		</tr>
		<tr>
		  <td>555 77 855</td>
		</tr>
	</table>

<table border="1">
	<caption>跨列</caption>
		<tr>
		  <th>姓名</th>
		  <th colspan="2">电话</th>
	</tr>
	<tr>
		  <td>Bill Gates</td>
		  <td>555 77 854</td>
		  <td>555 77 855</td>
	</tr>
</table>

5. A table with a title. Caption represents the title of the table. You can also use other tags such as p tags to locate the table title. But the advantage of using caption is that it will follow the table. The default is in Align to the center of the table.

6. Arrange content in table cells, such as adding paragraphs, lists, etc. in cells.

<table border="1">
	<tr>
		<td>
			<p>这是一个段落，hello World！</p>
		</td>
		<td>
			<ul>
				<li>这是一个列表
					<ul>
						<li>html</li>
						<li>css</li>
						<li>javascript</li>
					</ul>
				</li>
			</ul>
		</td>
	</tr>
</table>

7.frame frame attribute,

Specifies which part of the outer border is visible. //Will not be used for the time being.

Related recommendations:

Implementation of HTML page table scroll bar

Detailed explanation of ElTableColumn extension method

Related operations of SQL ALTER TABLE statement

The above is the detailed content of Detailed explanation of table in html. For more information, please follow other related articles on the PHP Chinese website!