Scribd Logo
Upload

Welcome to Scribd!

  • HTML Lectures 4

    Uploaded by

    Ssip Consultation
    6 views7 pages
    This document discusses different ways to style HTML tables using CSS including adding borders to the table and cells, collapsing borders, adding padding to cells, left-aligning headings, and adding spacing between borders. It also covers different HTML form elements like text fields, radio buttons, checkboxes, and submit buttons and provides examples of how to implement these elements in a form.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses different ways to style HTML tables using CSS including adding borders to the table and cells, collapsing borders, adding padding to cells, left-aligning headings, and adding spacing between borders. It also covers different HTML form elements like text fields, radio buttons, checkboxes, and submit buttons and provides examples of how to implement these elements in a form.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    6 views7 pages

    HTML Lectures 4

    Uploaded by

    Ssip Consultation
    This document discusses different ways to style HTML tables using CSS including adding borders to the table and cells, collapsing borders, adding padding to cells, left-aligning headings, and adding spacing between borders. It also covers different HTML form elements like text fields, radio buttons, checkboxes, and submit buttons and provides examples of how to implement these elements in a form.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 7

    Lecture:4

    Table Borders with CSS

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    table, th, td {

    border: 1px solid black;

    </style>

    </head>

    <body>

    <h2>Table With Border</h2>

    <p>Use the CSS border property to add a border to the table.</p>

    <table style="width:100%">

    <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

    </tr>

    <tr>

    <td>Jill</td>

    <td>Smith</td>
    <td>50</td>

    </tr>

    <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

    </tr>

    <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

    </tr>

    </table>

    </body>

    </html>

    HTML Table - Collapsed Borders


    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    HTML Table - Add Cell Padding


    <style>

    table, th, td {

    border: 1px solid black;


    border-collapse: collapse;

    th, td {

    padding: 15px;

    </style>

    HTML Table - Left-align Headings


    <style>

    table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

    th, td {

    padding: 5px;

    th {

    text-align: left;

    </style>

    HTML Table - Add Border Spacing


    <style>

    table, th, td {

    border: 1px solid black;

    padding: 5px;
    }

    table {

    border-spacing: 15px;

    </style>

    HTML Forms

    Text Fields
    The <input type="text"> defines a single-line input field for text input.

    Example
    A form with input fields for text:

    <form>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname">
    </form>

    This is how the HTML code above will be displayed in a browser:

    First name:

    Last name:
    Radio Buttons
    The <input type="radio"> defines a radio button.

    Radio buttons let a user select ONE of a limited number of choices.

    Example
    A form with radio buttons:

    <p>Choose your favorite Web language:</p>

    <form>
      <input type="radio" id="html" name="fav_language" value="HTML">
      <label for="html">HTML</label><br>
      <input type="radio" id="css" name="fav_language" value="CSS">
      <label for="css">CSS</label><br>
      <input type="radio" id="javascript" name="fav_language" value="JavaScri
    pt">
      <label for="javascript">JavaScript</label>
    </form>

    This is how the HTML code above will be displayed in a browser:

    Choose your favorite Web language:

     HTML
     CSS
     JavaScript
    Checkboxes
    The <input type="checkbox"> defines a checkbox.

    Checkboxes let a user select ZERO or MORE options of a limited number of


    choices.

    Example
    A form with checkboxes:

    <form>
      <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
      <label for="vehicle1"> I have a bike</label><br>
      <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
      <label for="vehicle2"> I have a car</label><br>
      <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
      <label for="vehicle3"> I have a boat</label>
    </form>

    This is how the HTML code above will be displayed in a browser:

     I have a bike
     I have a car
     I have a boat

    The Submit Button


    The <input type="submit"> defines a button for submitting the form data to a
    form-handler.

    The form-handler is typically a file on the server with a script for processing
    input data.

    The form-handler is specified in the form's action attribute.


    Example
    A form with a submit button:

    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form>

    This is how the HTML code above will be displayed in a browser:

    First name:
    John

    Last name:
    Doe

    Submit

    You might also like