The table element in x t email is used to create tabular data.
In other words data in rolls and columns like a spreadsheet.
Let's start with an example.
Beginning with this basic H Tim L which contains a head section and a body section including a title
to create a table we insert a table tag and then we go out of rows to the table.
Each row is represented by the t r r. table row element and then inside each row we add columns.
Each column is represented by the t d r.
Table data element.
For example here we have one row and two columns.
In the browser it looks like this by default tables are shown with no borders so it can be a bit difficult
to see what's going on.
Let's add some styles to the top of the page in the head section which will colour in the borders of
the various table elements will go into styling using C Ss like this later on in the course.
Now in the browser we can see the table more clearly with one row and two columns.
Just like in a spreadsheet.
The contents of each data element is often referred to as a table cell.
Let's change the content of the first two cells to a more meaningful example then will add some more
roles below the first one with some.
Example.
Content.
And in the browser the table looks like this.
A table with two columns and five rows.
When you have several rows in a table like this it's important to include the same number of t d elements
for each row.
For example if I remove the second column from the first row.
In the browser there's a gap where the cell should be.
You can make cells span more than one column though by using the colspan attribute.
If I add the attribute to this t d element with a value of two then this cell will span two columns
which in the browser looks like this.
In addition to making a cell spanned more than one column like this you can also make a cell span more
than one row.
For example if I remove this cell.
In the browser the cell after it moves to the left and leaves a gap.
But if I add the role span attribute to the first column of the previous row.
Now that cell spans two roles which in the browser looks like this.
You can have as many rolls and columns as you like in a table.
But be careful when using Carl span and rebel span for anything other than small spans like this as
it can be easy to create a complicated table layout that's difficult to maintain.
The first row are the first column of a table are commonly headers that contain titles that describe
what's in that column.
So instead of using the T D element for these we use the t h r table header element.
So let's replace the contents of this row with two t h elements T H.
Elements are used in the same way as t d elements but in the browser by default their style styled differently.
For example here they're bold.
It's also more semantic to use table header elements to mark-up which cells other headers from a column.
Speaking of semantically marking up a table we can optionally add elements to a table to mark up the
header body and footer sections of a table in a similar way.
We use the header and footer elements in the main body of the ace to email page to mark up the table
header.
We used the T head element and capsulated the roles that farm the table header.
The body of the table is marked up in a similar way with the T body element.
And finally the T foot element is used to mark up the footer part of the table in here.
Let's add a row with a t h and a t d element that represent the summary of the data in the body of the
table.
In the browser the T head t body and T F What elements.
By default.
Don't change how the table is styled but marking up the table with these elements is useful for accessibility.
When printing the table and when styling it.
The table element has many attributes that can be used to change how the table is displayed from the
width so the background colour border attributes and so on.
However using these attributes is no longer recommended.
And many of them have been deprecated in the latest version of AITs to email instead to use styling
on a table.
We use stylesheets which will look at later on in the course.
And one more thing I should mention is that tables are designed to display tabular data and nothing
else.
Many years ago tables were used for page layout but now the recommended way to lay out a page is using
the h.t. Amount elements we've already been using.