HTML Tables

Published by Rachel on

HTML, or HyperText Markup Language, is the language that web pages use to display their content. It’s made up of different elements which tell the web browser how to show it’s information. In today’s online world, understanding how websites work is crucial. Here are the only basics you need to know about HTML tables!



Table

To create HTML tables, use the ‘<table>’ tag. Every piece of information inside the table must be within the opening and closing tags. Formatting elements are usually placed within this element. A table can have multiple columns, rows, and headings. You can also include a separate table within another table.

<table> This defines a table </table>

Row

To create multiple rows within the table, use the ‘<tr>’ tag. Every new row needs to be defined, and data elements are held within this element. Each row can contain as many headings and data as desired.

<tr> This defines a table row </tr>


Data

You can assign different information, or data, to individual table cells using the ‘<td>’ tag. The text within this tag is regular and left-aligned. The data within this element is every piece of information you want to include, from text to lists to images.

<td> This defines a table data element </td>

Header

You can assign different headings to individual tablet columns using the ‘<th>’ tag. The text within this tag is bold and centred by default.

<th> This defines a table column header </th>


Format

To create a border around the table, the format is always ‘<table border = “Numerical Size” >’. You can adjust the space between cells, the format is always ‘<table cellspacing = “Numerical Size” >’. To adjust the space between cell content and cell border, the format is always ‘<table cellpadding = “Numerical Size” >’.

<table border = “1” >
<table cellspacing = “2” >
<table cellpadding = “3” >

Summary
<table border = “1”>

        <tr>
            <th> Dog Breeds </th>
            <th> Cat Breeds </th>
	</tr>
	
        <tr>
            <td> Poodle </td>
            <td> Ragdoll </td>
        </tr>

        <tr>
            <td> Dalmatian </td>
            <td> Siamese </td>
        </tr>

    </table>
Dog Breeds Cat Breeds
Poodle Ragdoll
Dalmatian Siamese

Read more about programming here!


Share:

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *