> ## Documentation Index
> Fetch the complete documentation index at: https://fastapi2day.codewithsiva.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying Text, Tables, and Media in Streamlit Apps

> Render text, markdown, headers, tables, DataFrames, images, code blocks, JSON, and status messages inside your Streamlit application.

Before you add any interactivity to a Streamlit app, you need to know how to display content — text, data, media, and status messages. Streamlit provides a dedicated function for almost every type of output you'd want to present, and they all follow the same pattern: call a `st.` function with your content as the argument. This page covers every major content-display function you'll need, from simple paragraphs to styled DataFrames to error banners.

## Text and Markdown

`st.write()` is Streamlit's Swiss Army knife — it accepts strings, numbers, Pandas DataFrames, Matplotlib figures, and many other types and renders them appropriately.

```python theme={null}
import streamlit as st

st.write("This is a simple message")
st.write("You can also write", "multiple", "arguments")
```

For richer formatting, use `st.markdown()` with standard Markdown syntax:

```python theme={null}
st.markdown("Use *italic* or **bold** text")
st.markdown("---")  # horizontal rule
st.markdown("> A blockquote")
```

## Headers and Structure

Use heading functions to organize your app into clear sections:

```python theme={null}
st.title("Main Title")         # Largest heading
st.header("Section Heading")  # H2-level
st.subheader("Sub-section")   # H3-level
st.caption("Small caption text below a chart")
```

## Tables and DataFrames

Streamlit offers two ways to display tabular data:

| Function         | Type        | Features                      |
| ---------------- | ----------- | ----------------------------- |
| `st.dataframe()` | Interactive | Sorting, scrolling, search    |
| `st.table()`     | Static      | Fixed display, no interaction |

```python theme={null}
import streamlit as st
import pandas as pd

sales = pd.DataFrame({
    "Product": ["Phone", "Laptop", "Headphones"],
    "Price":   [45000, 75000, 4500],
    "In Stock": [True, True, False]
})

st.subheader("Interactive Table")
st.dataframe(sales)

st.subheader("Static Table (first 2 rows)")
st.table(sales.head(2))
```

<Tip>
  Use `st.dataframe()` for large datasets where users need to sort or search. Use `st.table()` for small, fixed reference tables where you want a clean, print-like appearance.
</Tip>

## Images

Display local files or images from a URL:

```python theme={null}
import streamlit as st

# Remote URL
st.image(
    "https://streamlit.io/images/brand/streamlit-logo-secondary-colormark.png",
    caption="Streamlit Logo",
    width=200
)

# Local file
st.image("images/chart.png", use_column_width=True)
```

## Code and JSON

Show syntax-highlighted code samples or raw JSON data directly in your app:

```python theme={null}
import streamlit as st

# Code block with language highlighting
st.code("print('Hello from Streamlit')", language="python")

st.code("""
SELECT employee_name, salary
FROM employee
WHERE salary > 70000;
""", language="sql")

# Pretty-printed JSON
st.json({"status": "ok", "items": [1, 2, 3], "user": {"id": 42}})
```

## Status and Alert Messages

Use status helpers to communicate state, results, and warnings to your users:

```python theme={null}
import streamlit as st

st.success("Data loaded successfully")   # Green
st.info("Waiting for user input")        # Blue
st.warning("This may take a moment")     # Yellow
st.error("Something went wrong")         # Red
```

You can also display a progress bar or spinner for long-running operations:

```python theme={null}
import streamlit as st
import time

# Spinner — shows while a block of code runs
with st.spinner("Calculating results..."):
    time.sleep(2)
st.success("Done!")

# Progress bar — useful for loops
progress = st.progress(0)
for i in range(100):
    time.sleep(0.01)
    progress.progress(i + 1)
```

## Combining Elements

In practice you'll combine these building blocks to create structured, readable app sections. Here's a minimal product card:

```python theme={null}
import streamlit as st
import pandas as pd

st.title("Product Inventory")
st.markdown("Review current stock levels and pricing.")

inventory = pd.DataFrame({
    "Product":  ["Phone", "Laptop", "Tablet"],
    "Price":    [45000, 75000, 30000],
    "In Stock": [True, True, False]
})

st.dataframe(inventory)

if not inventory["In Stock"].all():
    st.warning("Some products are currently out of stock.")
```