HTML – HTML Tables

Working with HTML tables

HTML tables- I think you imagine what a table is in everyday life – it is a set of rows and columns , at the intersection of which are cells .

In HTML, tables are created in a similar way. There are also columns and rows with cells, but the HTML code of the tables at first glance may seem unusual.

HTML - HTML Tables

The table itself has a rigid structure: the main one is the tag , inside which there should be  tags that create rows (rows) of the table, and inside them – tags that create cells .As you can see, there are no tags that would create columns – tables are created in rows: first the first row, then the second, and so on. Examine carefully the following example with the table (tag table added attribute border , which defines the border table and its cells):

<table border = "1">
<! - This will be the first row of the table: ->
<tr>
  <td> Cell 1 </td>
  <td> Cell 2 </td>
  <td> Cell 3 </td>
</tr>

    <! - This will be the second row of the table: ->
<tr>
  <td> Cell 4 </td>
  <td> Cell 5 </td>
  <td> Cell 6 </td>
</tr>

    <! - This will be the third row of the table: ->
<tr>
  <td> Cell 7 </td>
  <td> Cell 8 </td>
  <td> Cell 9 </td>
</tr>
</table>

This is how the code will look in the browser:

Cell 1Cell 2Cell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 9

Header cells

Besides td tags, there are also <th> tags , which also create cells. But these will no longer be ordinary cells, but header cells that indicate what is in the given column (or row) of the table.

In the following example, the cells “Ivan” and “Nikolay” should be ordinary td cells , and the cell “Name”, logically, should be the header cell th , since “Name” is the general name of the contents of this column:

<table border = "1">
     <tr>
          <th> Name </th>
          <th> Last name </th>
          <th> Salary </th>
     </tr>
     <tr>
          <td> Ivan </td>
          <td> Ivanov </td>
          <td> 200 $ </td>
    </tr>
    <tr>
         <td> Nikolay </td>
         <td> Sidorov </td>
         <td> 1000 $ </td>
    </tr>
</table>

This is how the code will look in the browser:

NameSurnameSalary
IvanIvanov200 $
NikolaySidorov1000 $

By default, the text in th cells will be bold and centered (this behavior can be changed, but more on that later).

Cellspacing attribute

Have you noticed that there is some distance between the cells , because of which you can see that each cell has its own border? This distance is controlled by the cellspacing attribute . Moreover, if we do not write this attribute, then its value will not be zero at all (in this case, all cells would stick to each other). That is, the cellspacing attribute has some nonzero value by default , due to which the cells do not stick together (this distance is equal to several pixels).

Let’s see an example. Now I will add space between the cells to 10 pixels:

<table border="1" cellspacing="10">
	<tr>
		<th> Name </th>
        <th> Last name </th>
        <th> Salary </th>
	</tr>
	<tr>
		<td>Ivan </td>
		<td>Ivanov</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Nikolay</td>
		<td>Sidorov</td>
		<td>1000$</td>
	</tr>
</table>

This is how the code will look in the browser:

NameSurnameSalary
IvanIvanov200 $
NikolaySidorov1000 $

The fact that cellspacing has some default can often get in your way. In this case, you should simply set it to zero.

This attribute is deprecated in HTML5 (but it still indents the default). Instead, you should use a special CSS property, which we’ll talk about later.

If you think you shouldn’t learn this attribute because it is outdated, you are wrong. There are many more non-HTML5 sites in the world and you may encounter this attribute (and some other legacy ones that we will go through). In this case, you need to know what it is and how to work with it.

Cellpadding attribute

The cellpadding attribute sets the padding between the text and the cell border. In the following example, I will set the value of this attribute to 20px and now the text will move away from the border of the cells:

<table border="1" cellpadding="20">
	<tr>
		<th>Name</th>
		<th>Last name</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>Ivan</td>
		<td>Ivanov</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Nikolay</td>
		<td>Sidorov</td>
		<td>1000$</td>
	</tr>
</table>

This is how the code will look in the browser:

NameSurnameSalary
IvanIvanov200 $
NikolaySidorov1000 $

For comparison, here is how the table will look by default:

NameSurnameSalary
IvanIvanov200 $
NikolaySidorov1000 $

The cellpadding attribute also has some default value. If it bothers you, reset it to zero.

This attribute, like cellspacing, is deprecated in HTML5.

Zero cellpadding and cellspacing

Let’s zero out cellpadding and cellspacing and see what will happen to the table in this case:

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>Name</th>
		<th>Last name</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>Ivan</td>
		<td>Ivanov</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Nikolay</td>
		<td>Sidorov</td>
		<td>1000$</td>
	</tr>
</table>

This is how the code will look in the browser:

NameSurnameSalary
IvanIvanov200 $
NikolaySidorov1000 $

As you can see, in this case, the table cells are stuck together , but it is still noticeable that each cell has its own border (that is, the borders are now double). You can fix this as you learn CSS.

Adding width and height

There are also the width and height attributes that allow you to set the table width and height of the table, respectively (without these attributes, the width and height of the table are regulated by its contents: a lot of text – a large width, a little text – a small width).

Take a look at an example of their application:

<table border="1" cellpadding="0" cellspacing="0" width="300" height="300">
	<tr>
		<th>Name</th>
		<th>Last name</th>
		<th>Salary</th>
	</tr>
	<tr>
		<td>Ivan</td>
		<td>Ivanov</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Nikolay</td>
		<td>Sidorov</td>
		<td>1000$</td>
	</tr>
</table>

This is how the code will look in the browser:

NameSurnameSalary
IvanIvanov200 $
NikolaySidorov1000 $

Attribute values ​​can be pixels or percentages . Percentage values ​​are set like this: width = “30%” – in this case, the table will occupy 30% of the parent’s width.