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

Home

Web Front-end

HTML Tutorial

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

寻∝梦

Aug 30, 2018 am 10:47 AM

html table

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!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Nordhold: Fusion System, Explained

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1665

CakePHP Tutorial

1424

Laravel Tutorial

1322

PHP Tutorial

1270

C# Tutorial

1249

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles