Check out example codes for "css table". It will help you in understanding the concepts better.
Code Example 1
table, th, td {
border: 1px solid black;
}
Code Example 2
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Code Example 3
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
Code Example 4
<!-- How to create a simple table? -->
<table style="width:100%">
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Line_1 Column_1</td>
<td>Line_1 Column_2</td>
</tr>
<tr>
<td>Line_2 Column_1</td>
<td>Line_2 Column_2</td>
</tr>
</tbody>
</table>
<!-- How to use tables to position other elements? -->
<!-- Exemple: put a paragraph in front of an image -->
<table id="begin" cellspacing="15">
<tr>
<td>
<img src="https://..." alt="some_name" height="180" width="180"/>
</td>
<td>
<h1>Some Header</h1>
<dl>Some Title</dl>
<p style="width: 70%;">
text text text text text text text text text text... and more text
<a href="https://..">a link</a>.</p>
</td>
</tr>
</table>
Learn ReactJs, React Native from akashmittal.com