Line wrap

| <!DOCTYPE html>
| <html lang="en">
| <head>
| <meta name="viewport" content="width=device-width,initial-scale=1">
| <meta charset="utf-8">
| <meta name="keywords" content="HTML5, CSS, jQuey">
| <meta name="description" content="developing web page using HTML5, CSS,..">
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
| <link href="styles/style1.css" rel="stylesheet">
| <title>Tables, Images, Objects</title>
| <script>
| $(document).ready(function(){
| $("#navlocation").load("nav.html");
| });
| </script>
| <style>
| body{padding-top:50px; padding-bottom:50px; }
| </style>
| </head>
| <body>
| <div id="navlocation"></div>
| <header>
| <h1>Tables, Images, Objects</h1>
| </header>
| <section>
| <h2>Tables</h2>
| <article>
| <h3>Simple table</h3>
| <table class="table table-striped table-hover" style="width:300px; border: 1px solid">
| <caption>Grades</caption>
| <tr>
| <th></th>
| <th>HTML5</th>
| <th>SQL</th>
| <th>OOP</th>
| <th>PHP</th>
| </tr>
| <tr>
| <td class="left">Lisa</td>
| <td>5</td>
| <td>4</td>
| <td>4</td>
| <td>5</td>
| </tr>
| <tr>
| <td class="left">Jonathan</td>
| <td>3</td>
| <td>5</td>
| <td>4</td>
| <td>4</td>
| </tr>
| <tr>
| <td class="left">Tim</td>
| <td>3</td>
| <td>3</td>
| <td>3</td>
| <td>3</td>
| </tr>
| <tr>
| <td class="left">Laura</td>
| <td>5</td>
| <td>5</td>
| <td>5</td>
| <td>4</td>
| </tr>
| </table>
| </article>
| <article>
| <h3>Using rowspan and colspan</h3>
| <table style="background-color:#24FFFF; margin:auto; width:500px" class="table table-striped">
| <caption>Basketball Euroleague</caption>
| <tr>
| <th rowspan="2" style="vertical-align:middle">Team</th>
| <th colspan="2">Throws</th>
| <th rowspan="2" style="vertical-align:middle">Free<br>Throws</th>
| </tr>
| <tr>
| <th>3 Point</th>
| <th>2 Point</th>
| </tr>
| <tr>
| <td class="left">Real</td>
| <td>27</td>
| <td>33</td>
| <td>85</td>
| </tr>
| <tr>
| <td class="left">Barcelona</td>
| <td>24</td>
| <td>35</td>
| <td>89</td>
| </tr>
| <tr>
| <td class="left">Zalgiris</td>
| <td>28</td>
| <td>31</td>
| <td>88</td>
| </tr>
| <tr>
| <td class="left">Olimpiacos</td>
| <td>29</td>
| <td>36</td>
| <td>91</td>
| </tr>
| </table>
| </article>
| <article>
| <h3>Using row and column groups</h3>
| <p>NB: the col groups should be built first! </p>
| <table style="margin:auto;">
| <caption>Marathon</caption>
| <colgroup>
| <col style="width:80px"></col>
| <col style="width:160px"></col>
| <col style="width:80px"></col>
| </colgroup>
| <thead style="background-color: #94FFD3">
| <tr>
| <th>State</th>
| <th>Fullname</th>
| <th>Result</th>
| </tr>
| </thead>
| <tbody style="background-color:#AFFFF6">
| <tr>
| <th colspan="3">Women</th>
| </tr>
| <tr>
| <td class="left">Finland</td>
| <td>Silvia Koskilainen</td>
| <td>3.23.12</td>
| </tr>
| <tr>
| <td class="left">Estonia</td>
| <td>Sille Mägi</td>
| <td>3.43.45</td>
| </tr>
| <tr>
| <td class="left">Sweden</td>
| <td>Pia Svenson</td>
| <td>3.11.33</td>
| </tr>
| </tbody>
| <tbody style="background-color:#9FBFFF">
| <tr>
| <th colspan="3">Men</th>
| </tr>
| <tr>
| <td class="left">Finland</td>
| <td>Teemu Terilainen</td>
| <td>2.55.23</td>
| </tr>
| <tr>
| <td class="left">Estonia</td>
| <td>Priit Oja</td>
| <td>2.11.34</td>
| </tr>
| <tr>
| <td class="left">Sweden</td>
| <td>Samuel Larson</td>
| <td>2.44.52</td>
| </tr>
| </tbody>
| <tfoot style="background-color:#B3FF74">
| <tr>
| <td colspan="2">Women limit timew</td>
| <td>7.00.00</td>
| </tr>
| <tr>
| <td colspan="2">Men limit timew</td>
| <td>5.00.00</td>
| </tr>
| </tfoot>
| </table>
| </article>
| <br>
| </section>
| <footer class="fixed-bottom">
| &copy; Copyright. Smart Fox. All rights reserved.<br>
| Tallinn, Suur-Sõjamäe 10A
| </footer>
| </body>
| </html>