Skip to main content

How to create tables for Websites?

 How to create tables for Websites?

How to create tables for Websites?

There are many types of information that we need to be displayed in a grid or
table. For instance: 

  • sports results
  • stock reports
  • train timetables
We need to think in terms of a grid made up of rows and columns (a bit like a spreadsheet) when representing information in a table.

What's a Table?

The information in a grid format is being represented as a Table. There are several examples of tables comprising financial reports, TV schedules, and sports results. Grids permit us to understand complex data by referencing information on two axes. Every block in the grid is referred to as a table cell. A table is written out row by row in HTML.

Basic Table Structure

 <table>
The <table> element is used to create a table. The table contents are written out row by row.
<tr> 

We indicate the start of each row using the opening <tr> tag. The tr stands for table row. This is followed by one or more <td> elements (one for each cell in that row). We use a closing </tr> tag at the end of the row.
<td>

Using a <td> element, each cell of a table is represented . (The td stands for table data.) At the end of each cell we use a closing </td> tag. 

HTML

<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>

Result

15 15 30

45 60 45

60 90 90

Table Heading

<th>
The <th> element is used just like the <td> element. Its aim is to represent the heading for either a column or a row. The th stands for table heading. Even if a cell has no content, we should still use a <td> or <th> element to represent the presence of an empty cell otherwise the table will not render correctly. (The first cell in the first row of this example shows an empty cell.) Using <th> elements for headings helps people who use screen readers, improves the ability for search engines to index the pages. It also enables us to control the appearance of tables better when we start to use CSS. We may use the scope attribute on the <th> element to indicate whether it is a heading for a
column or a row. It may take the values: row to indicate a heading for a row or col to indicate a heading for a column.

HTML

<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>

Result

                        Saturday   Sunday

Ticket sold:      120            135

Total sales:      $600           $675

Spanning Columns

We may sometimes need the entries in a table to stretch across more than one column. The colspan attribute might be used on a <th> or <td> element. It indicates how many columns that cell should run across. In the example below we can see a timetable with five columns; the first column contains the heading for that row (the day), the remaining four represent one hour time slots. If we look at the table cell that contains the words 'Geography' we will see that the value of the colspan attribute is 2 , which indicates that the cell should run across two columns. The 'Gym' runs across three columns in the third row. We can see that the second and third rows have fewer <td> elements than there are columns. This is due to when a cell extends across more than one column, the <td> or <th> cells that would have been in the place of the wider cells are not included in the code.

 HTML

<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>

Result

                 How to create tables for websites? 

 Spanning Rows

We can also need entries in a table to stretch down across more than one row.
The rowspan attribute might be used on a <th> or <td> element to indicate how many rows a cell should span down the table. We may understand that ABC is showing a movie from 6pm - 8pm, whereas the BBC and CNN channels are both showing two programs. During this time period (each of which lasts one hour) in the example below. It only contains three elements even though there are four columns in the result below, if we look at the last <tr> element. This is due to the movie in the <tr> element above it uses the rowspan attribute to stretch down and take over the cell below.

HTML

 <table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>

Result

             How to create tables for websites?

Popular posts from this blog

What is Internet of Things (IoT)?

 What is Internet of Things (IoT)?    The internet of Things, or IoT, refers to the billions of physical devices  round the  world that are now connected to  the web  , collecting, sharing and analyses  of knowledge  . It presents and provides the explanation of the network of physical things which is embedded with software , sensors,  and other technologies for the benefit of connecting and exchanging data with other devices and systems on the internet   . Due to the cheap processors and wireless networks, it's possible to  means  anything, from a pill to an aero plane to a self-driving car into  an area  of the IoT. Overview IoT will control the Fourth  technological revolution  . The Fourth  technological revolution  is changing the very software-defined automation allows manufacturers to link all stages of  the worth  chain, rapidly adapt to changing markets , and make highly personalized products on a mass scale. The opportunities provided by this revolution are authenticated

What is Rust Borrowing?

What is Rust Borrowing? Borrowing We call having references as function parameters borrowing. As in real world , if an individual owns something, we 'll borrow it from them . Whenever we’re done, we 've got to offer it back. Referencing  The reference is that the act of consulting somebody or something so as to urge information We would  declare reference in terms of Rust programing as if we are taking a replica of it without damaging or taking its ownership. ‘&’ symbol is employed to pass the reference Have a look that  how ‘&’ symbol is employed in code. fn main() { let s1 = String::from("hello"); let len = calculate_length(&s1); println!("The length of {} is {}.", s1, len); } fn calculate_length(s: &String) -> usize { s.len()} Mutable References The actual concept of mutable reference is same as we use mutable variable When  we  need to  modify  mutable reference is employed once   the worth we make regard to.

Kubernetes Readiness Probes

 Kubernetes Readiness Probes Description We understand that liveness probes and the way they assist keep our apps healthy by ensuring unhealthy containers are restarted automatically. Same like liveness probes, Kubernetes permit us to also define a readiness looked for our pod. The readiness probe is deployed periodically and examines whether the precise pod should receive client requests or not. Whenever a container’s readiness probe returns back success, it’s signaling that the container is ready to simply accept requests. This notion of being prepared is clearly something that’s specific to every container. Almost as liveness probe Kubernetes sends requests to container and supported the result either successful or unsuccessful response it decides container is prepared to require traffic or still preparing for that. The liveness probes not like, if a container fails the readiness check, it won’t be killed or restarted.   This is a very good practice to