To create tables, we will use 3 new tags. Tag table is a general border. Cells will go between opening and closing table tag.
For every row we will use tr tag. And once inside row, we will use td tag to set values into cells. It's like Excel, but we are doing things manually here in html.
This is the most simplistic example of one table with two cells. Please note that there are no borders around cell by default:
<table>
<tr>
<td>Name</td>
<td>LastName</td>
</tr>
</table>
A little bit more rows:
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
</head>
<body>
<h1>Tables in HTML</h1>
<table>
<tr>
<td>Name</td>
<td>LastName</td>
</tr>
<tr>
<td>Jordan</td>
<td>Peterson</td>
</tr>
<tr>
<td>Slavoj</td>
<td>Zizek</td>
</tr>
</table>
</body>
</html>
To create a border around a table, we can use border attribute, in this case value is 1. Also, width of a table can be given in percentages. You can experiment with cellpading and cellspacing attributes to get a feel what those attribute means:
Sure, using bgcolor attribute on specific tr row, we can set background color using plain english:
<!DOCTYPE html>
<html>
<head>
<title>Security Tutorials</title>
</head>
<body>
<h1>Tables in HTML</h1>
<table border="1" width="50%" cellpading="10" cellspacing="10">
<tr bgcolor="lightgrey">
<td>Name</td>
<td>LastName</td>
</tr>
<tr>
<td>Jordan</td>
<td>Peterson</td>
</tr>
<tr bgcolor="yellow">
<td>Slavoj</td>
<td>Zizek</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment