How to make the border of html table? HTML table creation and examples-HTML Tutorial-php.cn

This article mainly tells you about the border usage of html table table tags. Generally, we set the border line to 1 to demonstrate the border method. Next, let’s take a look at this article about the use of borders in html table table tags

First, let’s take a look at how the table is defined:

The table is defined by the

tag . Each table has several rows (defined by the tag), and each row is divided into several cells (defined by the

tag). The letters td refer to table data, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.

Okay, let’s start by making a simple table:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<table border="1" width="300px" height="100">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table>
</body>
</html>

Copy after login

This is a simple table with three rows and three columns, as shown in the picture:

How to make the border of html table? HTML table creation and examples

For many people who are new to HTML, table

is the most commonly used tag, but many beginners do not understand the control of table borders.

Generally when we use a table, we always give it a border attribute, such as:

, the effect is as shown above:

You can find that the border of the table looks like Very wide. Of course, the "very wide" here is definitely not the width of the table border. The width you see should be caused by the gap between

. Therefore, you only need to modify the cellspacing attribute of the table, that is:

<table border="1px" cellspacing="0px" width="300px"    style="max-width:90%">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table>

Copy after login

The effect is as follows:

How to make the border of html table? HTML table creation and examples

We initially added border=1 to the table The reason is that a default black line style is added to the table, which is what we said above. Both td and table have default black borders. Therefore, if you need to completely solve this problem and allow the border to display normally, you can add it to the table. A color,

<table border="1px" bordercolor="#FF0000" cellspacing="0px" width="300px"    style="max-width:90%">
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
<tr><td><td><td></td></td></td></tr>
</table>

Copy after login

is not obvious in black, we change it to red

How to make the border of html table? HTML table creation and examples

Summary: As shown in the picture, the black border turns red, we can You can add content, adjust the size, etc. You can also adjust the text inside. In short, the table is very useful. In this article, we introduced the borders of table tables. Of course, we rarely use borders in actual applications, except for some special circumstances. Generally, we change the border line setting to 0, so that there is no border line. However, in our teaching, the border should basically be equal to one, which is convenient for viewing and adjustment.

【Editor’s Recommendation】

html Can p tag contain a tag? Description of the function of html p tag

html How to use a tag? Summary of the use of html a tag

The above is the detailed content of How to make the border of html table? HTML table creation and examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html table

source：php.cn

Previous article：How to use the ins tag to insert text and the del tag to delete text together in HTML? (with examples) Next article：How to implement html background navigation iframe click to change url (code)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn