Create an Apple Note that contains a table with the Shortcuts app

Question

Level 1

4 points

Create an Apple Note that contains a table with the Shortcuts app

I have a created a shortcut that creates a new Apple Note. I tried inserting a table into it, by creating a text with an HTML table and then convert it to RTF. However the table formatting is lost when I use the create new note action. If I copy the resulting RTF to the clipboard and paste it manually into an Apple note, the formatting is retained. Therefore, I think this is a bug in the create note action. Has someone else noticed this as well? Is there a workaround?

MacBook Air (M2, 2022)

Posted on Jan 13, 2024 4:34 AM

Reply

Answer 1

Top-ranking reply

VikingOSX

Level 10

124,208 points

Jan 13, 2024 6:25 AM in response to De Lub

Here is the minimal AppleScript to read in a selected HTML file and apply that HTML code to the body of the new Note that it creates. RTF won't cut it as the underlying content in a Note is HTML.

Expect to use basic unstyled HTML table tags, as CSS3 styling is tossed (including Grid and Flex table styles).

use scripting additions

set html_file to (choose file of type "public.html")
set myhtml to read html_file as text

tell application "Notes"
	activate
	make new note with properties {name:"HTML Note", body:myhtml}
end tell
return

from:

<!DOCTYPE html>
<!-- https://codepen.io/anon/pen/QwPVNW 
     https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Test</title>
<style>
body {
    font-family: arial;
    margin:10% 10% auto;
  }

  table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }

  table th, table td {
    padding: 10px;
    text-align: center;
  }

  table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600px) {

    table {
      border: 0;
    }

    table thead {
      display: none;
    }

    table tr {
      margin-bottom: 10px;
      display: block;
      border-bottom: 2px solid #ddd;
    }

    table td {
      display: block;
      text-align: right;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }

    table td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Payment">Payment #1</td>
      <td data-label="Issue Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #2</td>
      <td data-label="Issue Date">03/01/2015</td>
      <td data-label="Amount">$3,211</td>
      <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>
    
</body>
</html>

Reply

Create an Apple Note that contains a table with the Shortcuts app

Similar questions