Table in HTML
The table is a fairly popular piece of content on websites. Using tables helps make site layout more beautiful, content is more intuitive and easier to track for users.
So what do we need to create a table in HTML? Is it complicated? Want to add color to the table border, how to add the background color to the text in the table? In this article TipsMake.com will answer those questions and guide you to basic operations with tables on HTML, in addition to "promotion" to add alternating color schemes for rows in the HTML table. Invite you to follow along.
Table definition in HTML
HTML tables are defined by tags . Each row is defined by a tag
, title defined by
. By default the title will be bold and in the middle. Cells in the table defined by tags .
Tên
Họ
Tuổi
Lan
Nguyễn
20
Hoa
Phan
24
Note: Element is the place to store data of the table. They can include all elements of HTML such as text, images, lists, other tables .
Add borders to HTML tables
If not specified, the table will have no borders. Table borders are defined by the border
properties of CSS.
table, th, td {
border: 1px solid black;
}
Remember to define borders for both tables and cells in the table.
Border Collapse
If you want the space between the borders to be removed, use the property CSS border-collapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Cell Padding
Cell Padding is used to determine the distance between the contents of the cell and the border. If not specified, the cell to the border will have no spaces. To set this distance, use the padding.
CSS property padding.
th, td {
padding: 15px;
}
Headline left
By default the table title will be bold and centered. To align left, use CSS text-align.
properties text-align.
th {
text-align: left;
}
Border Spacing
Border Spacing determines the distance between table cells, using the CSS border-spacing
to determine.
table {
border-spacing: 5px;
}
Note: If the table uses border-collapse
, border-spacing
will not work.
The umbrella spreads over many columns
To make a cell span multiple columns, use the colspan.
attribute colspan.
Tên
Điện thoại
Vũ An
123456789
123456788
The umbrella spreads over many rows
To make a cell span multiple columns, use the rowspan.
attribute rowspan.
Tên:
La La
Điện thoại:
987654321
987654322
Add a description for the table
To add a description for the table, use the tag
Tiền tiết kiệm hàng tháng
Tháng
Số tiền
Sáu
$120
Bảy
$150
Note: Card
must be placed immediately after the card .
Add special styles to the table
To add a style to the table, use the id.
attribute id.
Tên
Họ
Tuổi
Lan
Phan
24
Hoa
Phạm
25
Now define this style.
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Add other styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
With the above code, even rows will have #eee background color, odd number rows will have #fff background color, black background color title.
Previous article: Images in HTML
The following article: List in HTML
You should read it
May be interested
- Why write neat and organized HTML?you will get many benefits from writing clean and precise html code. here's why it's a good idea to write optimal html code.
- HTML formthe form in html contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons ...
- Style properties in HTMLthe style attribute specifies the style for the html element.
- Text in HTMLthe element in html is used to define a paragraph of text.
- How to Use Text Color Tags in HTMLthis article explains how to change the font color in html documents. although the html style tag is obsolete in html5, you can use css to color content on an html page. if you use an older version of html, you can use the html text color tag as needed.
- Format text in HTMLformat elements in html help determine the style and importance of text.
- Elements in HTMLthe html element usually goes in pairs, including the opening tag, closing tag, and the content inside the two tags.
- Symbol - Icon in HTMLhtml has many mathematical, technical and monetary symbols that cannot be used to write.
- Common HTML mistakes that you should avoid for better web programminglearning html is not difficult, but when running it in the browser, errors often occur. here are common html errors and how to handle them for better web development.
- How to insert spaces in HTMLthis tutorial explains how to insert spaces and line breaks in html. because no matter how many times you type a space, html will display a space so to insert more than one space, you will need to use the html tag.